Css Bootstrap：下拉菜单相对于导航栏项的位置

发布于10月09日

我有以下下拉列表

<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>

下拉列表的左上角位于文本的左下角(操作)，但我希望DropdOn的右上角位于文本的右下角.我该怎么做？

bootstrap 3

v3.1.0之前的版本

您可以使用pull-right类将菜单的右侧与插入符号对齐:

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

小提琴:http://jsfiddle.net/joeczucha/ewzafdju/

v3之后.1

从v3.1.0开始，我们不建议在下拉菜单上使用.Pull-Right.至右对齐菜单，使用.Dropdown-Menu-Right.右对齐导航导航栏中的组件使用该类的混合版本自动对齐菜单.要覆盖它，请使用.Dropdown-Menu-Left.

您可以使用dropdown-right类将菜单的右侧与插入符号对齐:

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

小提琴:http://jsfiddle.net/joeczucha/1nrLafxc/

bootstrap 4

The class for bootstrap 4 are the same as Bootstrap > 3.1.0, just watch out as the rest of the surrounding markup has changed a little:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

小提琴:https://jsfiddle.net/joeczucha/f8h2tLoc/