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

我有以下下拉菜单

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

下拉菜单的左上角位于文本的左下角（动作），但我希望下拉菜单的右上角的位置位于文本的右下角。我怎样才能做到这一点？

这是我们试图达到的效果：

随着Bootstrap 3.1.0的发布以及Bootstrap 4的发布，需要应用的类均发生了变化。如果以下解决方案之一似乎无法正常工作，请仔细检查要导入的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.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>

小提琴：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>

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

不知道其他人如何解决此问题，也不确定Bootstrap是否为此配置了任何配置。

我发现此线程提供了解决方案：

https://github.com/twbs/bootstrap/issues/1411

其中一篇文章建议使用

<ul class="dropdown-menu" style="right: 0; left: auto;">

我测试了并且可以用。

希望知道Bootstrap是否为此提供了配置，而不是通过上述CSS。

干杯。

基于Bootstrap文档：

从v3.1.0开始，下拉菜单中不推荐使用.pull-right。使用.dropdown-menu-right

例如：

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

如果要向上显示菜单，只需添加“ dropup”
类，如果同一div中存在“ dropdown” 类，则将其删除。

<div class="btn-group dropup">

即使已经晚了，我希望我能帮助别人。如果下拉菜单或子菜单在屏幕的右侧，则在左侧打开；如果菜单或子菜单在屏幕的左侧，则在右侧打开。

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

要检测垂直位置，您还可以添加

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

Boostrap有一个称为的类navbar-right。因此，您的代码将如下所示：

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

如果您想使下拉列表居中，这就是解决方案。

<ul class="dropdown-menu" style="right:auto; left: auto;">