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

【问题标题】：Twitter Bootstrap Navigation Bar - Right Align Dropdown MenuTwitter Bootstrap 导航栏 - 右对齐下拉菜单
【发布时间】：2012-09-09 05:58:11
【问题描述】：

我正在使用带有 PHP 站点的 Twitter Bootstrap (v2.1.1)。我在 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> 文本一样将下拉菜单拉到右侧吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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

这个类没有变化。您可能会看到helpers classes 部分。

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

【讨论】：

非常感谢 - 那里有一阵子看不到树林了。效果很好。
一点也不。我忘记包含 bootstrap-collapse.js 以使用响应式菜单，更新：jsfiddle.net/YzPYe/1。
navbar-right 在 TB 3 中并不完全相同。当您缩小屏幕时，菜单将填满整个宽度（IMO 的预期行为），使用 pull-right 它不会跨度>
navbar-right 在屏幕尺寸小于 768 像素时不起作用。因此，对于xs 尺寸的屏幕，应该使用pull-right。校验码：netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css

【解决方案2】：

如果您来这里尝试右对齐常规引导程序 .dropdown-menu 和 NOT .nav，并且使用 Bootstrap 3，则要添加正确的类是.dropdown-menu-right

这是bootstrap documentation：

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

【讨论】：

@Archonic 是的，但不是在移动 (xs) 屏幕尺寸上。你知道解决方法吗？
更新了 3.3 的文档链接：getbootstrap.com/docs/3.3/components/#dropdowns-alignment 以及 4.0 的文档链接：getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

【解决方案3】：

对于那些使用 Bootstrap 3 的人，.navbar-right 可以解决问题。

例如，

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

【讨论】：

【解决方案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/

【讨论】：