ブートストラップを使用したドロップダウンメニュー

Question

私はドロップダウンメニューをBootstapの中央に配置しようとしています。

<ul class="dropdown-menu"> 

それは、デフォルトで左に引く、またはそれが右に行かせるために、次のように私はpull-rightが定義されて使用することができます

.dropdown-menu.pull-right { 
    right: 0; 
    left: auto; 
} 

私もそれを中央にしたいです。私はBoostrapを初めて使っており、どのようにセンターを配置するのか分かりません。任意のヒント？私は右を試みた：50％しかし、それは動作しませんでした。

注：私は実際のテキストをドロップダウンメニューの中央に配置するつもりはありません。私は実際のドロップダウンメニューとそれが下からドロップするナビゲーションメニュー項目の下にcarretを中心に探しています。ここで

は私のテンプレートでは私の完全なコードスニペットです：

<ul class="nav"> 
    <li id="tab_profile"> 
     <a href="{% url profile_detail user.username %}">{% trans "PROFILE" %}</a> 
    </li> 
    <li id="product_data"> 
     <a href="{% url all_models %}">{% trans "PRODUCT DATA" %}</a> 
    </li> 
    <li id="product_library"> 
     <a href="{% url library %}">{% trans "LIBRARY" %}</a> 
    </li> 
    <li id="database"> 
     <a href="/DATABASE/">{% trans "DATABASE" %}</a> 
    </li> 
     <li class="dropdown" id = "community"> 
     <a class="dropdown-toggle" href="#">COMMUNITY</a> 
      <ul class="dropdown-menu pull-right"> 
       <li> <a href="/profiles">Search</a></li> 
       <li><a href="https://stackoverflow.com/questions/">Questions and Answers</a></li> 
       <li><a href="{% url view_requests %}">Requests</a></li> 
       </ul> 
     </li> 
</ul> 

CSS：あなたはCSSとして以下を追加し、以下に示すように、タグでこのクラスを与えることができ

.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 160px; 
    padding: 4px 0; 
    margin: 1px 0 0; 
    list-style: none; 
    background-color: #ffffff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
} 
.dropdown-menu.pull-right { 
    margin-right: auto; 
    margin-left: auto; 
} 

Answer 1

。 HTMLコードで

.centerDropdown { 
    left: auto !important; 
    right: -25% !important; 
} 
.centerDropdown:after { 
    left: auto !important; 
    right: 45% !important; 
} 

、

<li class="dropdown"> 
    <a href="/channel/list" data-toggle="dropdown" class="dropdown-toggle"> 
     <i class="icon-th-list"></i> 
      Lists 
    </a> 
    <ul class="dropdown-menu centerDropdown"> 
      <li><a href="/list">Find a list</a></li> 
      <li><a href="/my">My lists</a></li> 
      <li><a href="/create">Create a list</a></li> 
    </ul> 
</li> 

Answer 2

.dropdown-menu { 
    left: 50% !important; 
    margin-left: -70px; 
} 

このデフォルトドロップダウンメニューブートストラップを使用しているとき私のために働きました。メニューの幅に応じて余白を調整するだけです。

Answer 3

この応答は少し遅れますが、うまくいけば便利です。ブートストラップのドロップダウンメニューをその親に関して中央に置くには、これを試してください。

.dropdown-menu { 
    left: -40px; 
    right: -40px; 
} 

必要に応じてサイズを調整します。数値の値（この例では40ピクセル）が一致していることを確認してください。ここでは、親/元のリンクの左と右のドロップダウンメニュー40pxの左右をそれぞれ引く。

BONUS ROUND： リスト項目のテキストがメニューよりも広い場合は、次の宣言を追加することを検討してください。

.dropdown-menu>li>a { 
    white-space: normal; 
}