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

Question

我有以下下拉菜单

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

dropdown的左上角在文字的左下角（Action），但是我希望dropdwon的右上角的位置在文字的右下角.我该怎么做？

Answer 1

不确定其他人如何解决此问题或 Bootstrap 是否对此有任何配置。

我发现这个帖子提供了解决方案：

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

其中一篇文章建议使用

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

我测试过，它可以工作。

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

干杯。

Answer 2

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

需要应用的类随着 Bootstrap 3.1.0 的发布和 Bootstrap 4 的发布而改变。如果以下解决方案之一似乎不起作用仔细检查版本号导入您正在导入的引导程序并尝试不同的引导程序。

引导程序 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。右对齐导航 导航栏中的组件使用此类的混合版本 自动对齐菜单。要覆盖它，请使用 .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/

Answer 3

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>

Answer 4

基于 Bootstrap 文档：

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

例如：

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

Answer 5

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

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

Answer 6

如果要向上显示菜单，只需添加类“dropup”
如果存在于同一个 div 中，则删除类“下拉列表”。

<div class="btn-group dropup">

Answer 7

即使为时已晚，我也希望我能帮助某人。如果下拉菜单或子菜单在屏幕右侧，则在左侧打开，如果菜单或子菜单在左侧，则在右侧打开。

$(".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/

Answer 8

如何做到不在屏幕的相对一侧（作为用户@JD11，他是答案底部）和相对于块（div）的一侧？

例如在带有“card-body”类的 div 中：

<div class="card-body">
    <div class="btn-group">
        <button type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
        <div class="dropdown-menu">
            <span class="text-nowrap">Name</span><br><a href="#">Namber</a>
        </div>
    </div>
</div>