css - twitter bootstrap 下拉菜单的对齐方式

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

最好避免使用pxfor 定位，因为下拉菜单的宽度可能会改变。这将更适合于居中插入符号：

.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 2

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 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>

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