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>文本一样将下拉菜单向右拉吗？

- user982124

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 类别。

- Caio Tarifa

---

非常感谢 - 我有一段时间看不清事情的本质了。现在运行得很好。 - user982124

一点也没有。我忘了包含 bootstrap-collapse.js 以使响应式菜单工作，这是更新的链接：http://jsfiddle.net/YzPYe/1/. - Caio Tarifa

navbar-right在TB 3中并不完全相同。当您缩小屏幕时，菜单将填充整个宽度（我认为这是预期的行为），而使用pull-right则不会。 - PedroSena

当屏幕尺寸小于768px时，navbar-right不起作用。因此，应该在xs尺寸屏幕上使用pull-right。请检查代码：http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css - trante

Answer 2

如果您来到这里是为了想要将常规的 Bootstrap 的 .dropdown-menu 右对齐，而不是 .nav，并且您正在使用的是 Bootstrap 3，那么正确的类别是添加 .dropdown-menu-right

这里是 Bootstrap 文档:

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

- jbmilgrom

---

@Archonic 是的，但在移动设备（xs）屏幕尺寸上不支持。你知道有什么解决方法吗？ - ganders

3.3 版本的文档更新链接：https://getbootstrap.com/docs/3.3/components/#dropdowns-alignment4.0 版本的文档链接为：https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment - Mike Vallano

Answer 3

对于使用Bootstrap 3的用户来说，.navbar-right就能解决问题。

例如，

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

- Ajoy

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/

- Andres Ilich