Twitter Bootstrap导航栏 - 右对齐下拉菜单

Question

我正在使用Twitter Bootstrap(v2.1.1)和PHP站点.我正在php脚本中动态生成导航栏,因为如果用户登录或退出站点,导航栏将具有不同的内容.

我想将最后一个下拉菜单对齐到屏幕右侧但是到目前为止还没有.这是一个显示简化版本的jsFiddle:

http://jsfiddle.net/fmdataweb/AUgEA/

我希望菜单2下拉到右对齐.最后一个下拉列表的代码与其他下拉列表相同:

<li class="dropdown pull-right">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="propertiesSearch.php">Logout</a></li>
</ul>
</li>          

我试过把它变成:

<li class="dropdown pull-right">

但这没有任何区别.任何人都知道如何使用表单和<p>文本将下拉菜单拉到右侧？

Answer 1

您需要将.pull-right类更改为ul元素而不是li.

HTML

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

版本2.1.1

我重写了你的代码,包括必要的JavaScript插件(bootstrap-dropdown.js),最新版本的Twitter Bootstrap(2.1.1)以及对响应式设计的支持.

http://jsfiddle.net/caio/gvw7j/

如果您在上面的链接中看到响应式菜单,则可以在此链接中看到"广泛结果":

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right 定义如下:

.pull-right {
  float: right !important;
}

版本3.1.1

这堂课没有变化.您可能会看到帮助程序类部分.

但是,文档建议使用该类,.navbar-right因为它具有一些特定的优化,与pull-right类不同.

Answer 2

如果你来到这里试图正确对齐常规引导.dropdown-menu而不是 a .nav,并且正在使用Bootstrap 3,那么要添加的正确类是.dropdown-menu-right

这是bootstrap文档:

<ul class="dropdown-menu dropdown-menu-right">
  ...
</ul>

Answer 3

对于那些使用Bootstrap 3的人来说,.navbar-right可以做到这一点.

例如,

<ul class="nav navbar-nav navbar-right">
.
.
</ul>

Answer 4

而不是将li元素拉到左边,只需包含您希望在其自己的ul列表中右对齐的元素,然后将其拉出来,如下所示:

HTML

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="propertiesSearch.php">Logout</a></li>
        </ul>
    </li>    
</ul>

演示:http://jsfiddle.net/AUgEA/1/