显示引导程序下拉菜单，将列表向左而不是向右

display bootstrap dropdown-menu to orient the list to the left instead of right

本文关键字：列表 引导程序 下拉菜单 显示      更新时间：2023-09-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中，您可以看到一个右侧带有下拉按钮的输入棒。

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

问题

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

来自文档：

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

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

更新的fiddle

尝试使用：

class="dropdown-menu pull-right"

正如你在这里看到的：更新的Fiddle

这将确保dropDown菜单向右拉，从而使其成为float:right!important。

这将确保它不会被隐藏。

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

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

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

事实上，这个来自引导程序库的类.pull-right做的事情是一样的：

CSS

.pull-right {
  right:0;
  left: auto;
}
相关文章：