对准

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> 

通过这种方式，您可以根据您的选择将菜单左对齐或右对齐。