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

Question

我在 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> 一样将下拉菜单拉到右侧文本？

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

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

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