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

Question

我正在使用Twitter Bootstrap（v2.1.1）与PHP网站。我在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元素inst ead的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插件（自举dropdown.js），Twitter的引导的最新版本（2.1.1）并支持响应式设计。

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

如果您看到响应菜单上面的链接，你可以看到 “宽结果” 这个链接：

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

：

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

.pull-right被定义

---

版本3.1.1

此课程没有变化。您可能会看到helpers classes部分。

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

Answer 2

取而代之的是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/

Answer 3

对于那些使用引导3,.navbar-right会做的伎俩。

对于例如，

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

Answer 4

如果你来到这里，试图右对齐经常引导.dropdown-menu和不一个.nav，并使用引导3，正确的类补充的是.dropdown-menu-right

这里的bootstrap documentation：

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