35

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

4

4 回答 4

78

您需要将.pull-right类更改为ulelement 而不是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。

于 2012-09-17T02:08:53.113 回答
18

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

这是引导文档：

<ul class="dropdown-menu dropdown-menu-right">
  ...
</ul>
于 2015-08-05T19:51:43.320 回答
14

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

例如，

<ul class="nav navbar-nav navbar-right">
.
.
</ul>
于 2014-04-24T03:40:59.477 回答
11

与其将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/

于 2012-09-17T01:48:33.657 回答