Bootstrap: Position of dropdown menu relative to navbar item

I have the following dropdown

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

The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?

265987 次浏览
小开

不确定其他人是如何解决这个问题的，也不确定 Bootstrap 是否为此进行了任何配置。

我找到了一个解决方案:

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

其中一篇文章建议使用

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

我测试过了，很有效。

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

干杯。

小开
最佳答案

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

A right-aligned menu

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

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

在 v3.1.0之后

从 v3.1.0开始，我们已经不推荐在下拉菜单中使用.pull-right 右对齐菜单，使用。下拉菜单-右。右对齐导航 组件使用此类的混合版本来 自动对齐菜单。要覆盖它，使用。下拉菜单。

您可以使用 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 5

Again, very similar for Bootstrap 5 except now it's 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>

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

小开

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

基于 Bootstrap 文档:

在 v3.1.0中，. pull-right 在下拉菜单中不被推荐。 use .dropdown-menu-right

例如:

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

If you wants to center the dropdown, this is the solution.

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

如果你想显示菜单，只需添加类“ drop up”
并删除类“下拉列表”，如果存在从相同的 div。

<div class="btn-group dropup">

enter image description here

小开

即使很晚了，我希望我能帮助别人。如果下拉菜单或子菜单在屏幕的右边，它在左边打开，如果菜单或子菜单在左边，它在右边打开。

$(".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);
}


});

To detect vertical position you can also add

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

小开

如何做到不相对于屏幕的一边(作为一个用户@JD11他是回答底部)和相对于块的一边(div) ？

例如，在 div 中使用类“ card-body”:

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

提交答案