显示引导下拉菜单以将列表定向到左侧而不是右侧

Question

我对Bootstrap-Twitter 3的按钮下拉有问题。

的jsfiddle

HTML

<div class="input-group">
    <input type="text" class="form-control">
    <!-- Split button -->
    <div class="input-group-btn">
     <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

在上面的JSFiddle中，您可以在右侧看到一个带有下拉按钮的输入框。

问题是下拉按钮的列表以切割列表的方式显示（视口不应自行扩展，但这就是发生的情况）。

题

如何告诉此元素从右到左显示列表（与当前行为相反）？

Answer 1

从文档 ：

默认情况下，下拉菜单会自动从其父级的顶部和左侧100％定位。 将.dropdown-menu-right添加到.dropdown-menu右键对齐下拉菜单。

<ul class="dropdown-menu dropdown-menu-right">
    <!-- your li elements... -->
</ul>

更新了小提琴

Answer 2

尝试使用：

class="dropdown-menu pull-right"

正如你在这里看到的： 更新了小提琴

这将确保dropDown菜单向右拉，这使它float:right!important 。

这将确保它不会隐藏在后面。

编辑 ： Rory McCrossan的答案是这个问题的推荐解决方案

Answer 3

您可以通过CSS（覆盖默认规则）执行此操作，也可以使用新类进行自定义：

.dropdown-menu {
  right:0;
  left: auto;
}

事实上，这个类.pull-right来自bootstrap库是这样的：

CSS

.pull-right {
  right:0;
  left: auto;
}