引导下拉菜单：定位下拉内容

我有以下的下拉菜单

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> Action <b class="caret"></b></label> <ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> dropdown content goes here </ul> 

下拉列表的左上angular位于文本（Action）的左下angular，但我希望dropdwon的右上angular位置位于文本的右下angular。 我怎样才能做到这一点？

感谢致敬。

Answer 1

编辑：

从v3.1.0开始，我们已经在下拉菜单中弃用了.pull-right。 要使菜单右alignment，请使用.dropdown-menu-right。 导航栏中右alignment的导航组件使用此类的混合版本自动alignment菜单。 要覆盖它，请使用.dropdown-menu-left。

您可以使用“右下angular”类将菜单的右侧与插入符号alignment：

 <li class="dropdown"> <a class="dropdown-toggle" href="#">Link</a> <ul class="dropdown-menu dropdown-menu-right"> <li>...</li> </ul> </li> 

在这里工作的小提琴： http : //jsfiddle.net/jaq54yw8/

为了防止任何人使用Bootstrap <3.1.0，我只保留了以前的答案，但是您通常应该使用上面的（如果它似乎没有正常工作， 请检查包含Bootstrap的版本号）！

您可以使用“拉右”类将菜单的右侧与插入符号alignment：

 <li class="dropdown"> <a class="dropdown-toggle" href="#">Link</a> <ul class="dropdown-menu pull-right"> <li>...</li> </ul> </li> 

Answer 2

不知道其他人如何解决这个问题，或Bootstrap是否有任何configuration。

我发现这个线程提供了一个解决scheme：

https://github.com/twbs/bootstrap/issues/1411

其中一个post暗示了使用

 <ul class="dropdown-menu" style="right: 0; left: auto;"> 

我testing过，它的工作原理。

希望知道Bootstrap是否为此提供了configuration，而不是通过上面的CSS。

干杯。

Answer 3

基于Bootstrap文档：

从v3.1.0开始，在下拉菜单中不推荐使用.pull-right。 使用.dropdown-menu-right

例如：

 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> 

Answer 4

如果你想显示菜单，只需添加类“dropup”
并删除类“下拉”，如果存在从同一个div。

 <div class="btn-group dropup"> 

Answer 5

Boostrap有一个叫navbar-right 。 所以你的代码如下所示：

 <ul class="nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a> <ul class="dropdown-menu"> <li>...</li> </ul> </li> </ul> 

Answer 6

如果你想把下拉中心，这是解决scheme。

 <ul class="dropdown-menu" style="right:auto; left: auto;"> 

Answer 7

使用这个代码：

 <ul class="dropdown-menu" role="menu"> <li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li> </ul>