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

【问题标题】：display bootstrap dropdown-menu to orient the list to the left instead of right显示引导下拉菜单以将列表定位到左侧而不是右侧
【发布时间】：2015-11-10 13:16:26
【问题描述】：

我对 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 中，您可以看到右侧带有下拉按钮的输入杆。

问题在于下拉按钮的列表以一种被剪切的方式显示（视口不应该自行扩展，但是会发生这种情况）。

问题

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap button

【解决方案1】：

来自documentation：

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

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

Updated fiddle

【讨论】：

【解决方案2】：

尝试使用：

class="dropdown-menu pull-right"

如您所见：Updated Fiddle

这将确保dropDown 菜单向右拉，从而得到float:right!important。

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

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

【讨论】：

【解决方案3】：

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

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

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

CSS

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

【讨论】：