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

Twitter Bootstrap Navigation Bar - Right Align Dropdown Menu

提问by user982124

I'm using the Twitter Bootstrap (v2.1.1) with a PHP site. I'm generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site.

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

I would like to align the last dropdown menu to the right of the screen but haven't been able to so far. Here's a jsFiddle showing a simplified version:

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

http://jsfiddle.net/fmdataweb/AUgEA/

http://jsfiddle.net/fmdataweb/AUgEA/

I would like the Menu 2 drop down to be right aligned. The code the for last dropdown is the same as for other dropdowns:

我希望菜单 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>          

I've tried chaging it to:

我试过把它改成：

<li class="dropdown pull-right">

but that makes no difference. Anyone know how to pull the dropdown menu to the right like you can with forms and <p>text?

但这没什么区别。任何人都知道如何像使用表单和<p>文本一样将下拉菜单拉到右边？

回答by Caio Tarifa

You need to change the .pull-rightclass to ulelement instead of li.

您需要将.pull-right类更改为ulelement 而不是li.

HTML

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>

---

---

Version 2.1.1

版本 2.1.1

I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.

我重写了你的代码，只包括必要的 JavaScript 插件 (bootstrap-dropdown.js)、最新版本的 Twitter Bootstrap (2.1.1) 和对响应式设计的支持。

http://jsfiddle.net/caio/gvw7j/

http://jsfiddle.net/caio/gvw7j/

If you see the responsive menu in the above link, you can see the "wide result" in this link:

如果您在上面的链接中看到响应式菜单，则可以在此链接中看到“广泛的结果”：

http://jsfiddle.net/caio/gvw7j/embedded/result/

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-rightis defined by:

.pull-right定义为：

.pull-right {
  float: right !important;
}

---

---

Version 3.1.1

版本 3.1.1

There were no changes in this class. You might see the helpers classessection.

这门课没有任何变化。您可能会看到助手类部分。

However, the documentation recommends using the class .navbar-rightbecause it has some specific optimizations, unlike the pull-rightclass.

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

回答by jbmilgrom

If you came here trying to right-align a regular bootstrap .dropdown-menuand NOTa .nav, and are using Bootstrap 3, the correct class to add is .dropdown-menu-right

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

Here's the bootstrap documentation:

这是引导程序文档：

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

回答by Ajoy

For those using Bootstrap 3, .navbar-rightwould do the trick.

对于那些使用Bootstrap 3 的人来说，.navbar-right就可以了。

For eg.,

例如，

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

回答by Andres Ilich

Instead of pulling the lielement to the left, simply contain that element which you wish to be right aligned within its own ullist and pull that instead like so:

不要将li元素拉到左边，只需在其自己的ul列表中包含您希望右对齐的元素，然后像这样拉动它：

HTML

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>

Demo: http://jsfiddle.net/AUgEA/1/

演示：http: //jsfiddle.net/AUgEA/1/