對準

Question

我設計了一個自舉導航欄與下拉菜單

http://jsfiddle.net/yabasha/fex8N/3/

<nav class="navbar navbar-inverse"> 
<div class="navbar-inner"> 
    <ul class="nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </li> 
    </ul> 
</div> 

ul.nav li.dropdown:hover > ul.dropdown-menu{ 
display: block;  
} 

有沒有辦法改變的下拉列表中默認對齊 - 菜單（從左到中/右），箭頭會顯示在中間/右側？

Answer 1

的jsfiddle你的榜樣http://jsfiddle.net/shail/fex8N/5/

更改下面的代碼根據自己的喜好來居中下拉插入符號：

.navbar .nav > li > .dropdown-menu:after { 

left: 83px; /change to your liking/ 

} 
.navbar .nav > li > .dropdown-menu:before { 

left: 83px; /keep values in after and before same/

    } 

要對齊li元素到右側：

.dropdown-menu > li > a { 
      text-align:right; 
    } 

將li元素對齊到中心：

.dropdown-menu > li > a { 
      text-align:center; 
    } 

Answer 2

最好避免使用px進行定位，因爲下拉寬度可能會改變。這將是更適合於居中插入符號：

.navbar .nav > li > .dropdown-menu.pull-center:after { 
    left: 50%; 
    margin-left: -6px; 
} 
.navbar .nav > li > .dropdown-menu.pull-center:before { 
    left: 50%; 
    margin-left: -7px; 
} 

對於右對齊，你只需要對類pull-right添加到下拉：

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu pull-right"> 
    <!-- your menu --> 
    </ul> 
</li> 

Answer 3

我已經在我的項目中實現這一點，並回答在下面的鏈接。

https://stackoverflow.com/a/21849528/2026261。

Answer 4

<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;"> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Write Post</a></li> 
     <li><a href="#">Posts List</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
    <label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label> 
    <span class="caret" data-toggle="dropdown"></span> 
    </div> 

通過這種方式，您可以根據您的選擇將菜單左對齊或右對齊。