Question

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

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

我希望菜单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类不同。

Answer 2

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

这是bootstrap documentation：

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

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

4 个答案: