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

我有以下下拉菜单

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

dropdwon的左上角在文字（Action）的左下角，但我希望dropdwon的右上角的位置在文字的右下角。我怎样才能做到这一点？

这就是我们想要达到的效果：

需要应用的类随着 Bootstrap 3.1.0 的发布而更改，并随着 Bootstrap 4 的发布而再次更改。如果以下解决方案之一似乎不起作用仔细检查您要导入的 Bootstrap 的版本号并尝试另一种。

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>

Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/ http://jsfiddle.net/joeczucha/ewzafdju/

v3.1.0之后

从 v3.1.0 开始，我们已弃用下拉菜单上的 .pull-right。到 右对齐菜单，使用 .dropdown-menu-right。右对齐导航 导航栏中的组件使用此类的 mixin 版本来 自动对齐菜单。要覆盖它，请使用 .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>

Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/ http://jsfiddle.net/joeczucha/1nrLafxc/

引导程序4

Bootstrap 4 的类与 Bootstrap > 3.1.0 相同，只需注意周围标记的其余部分已经发生了一些变化：

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

Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/ https://jsfiddle.net/joeczucha/f8h2tLoc/

引导程序5

同样，与 Bootstrap 5 非常相似，只是现在它是dropdown-menu-end

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

Fiddle: https://jsfiddle.net/joeczucha/psnz2u36/ https://jsfiddle.net/joeczucha/psnz2u36/