我有以下下拉列表
<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>
下拉菜单的左上角在文本的左下角（Action），但我希望dropdwon的右上角的位置在文本的右下角。我怎样才能做到这一点？
这是我们想要达到的效果：
需要应用的类随着 Bootstrap 3.1.0 的发布和 Bootstrap 4 的发布而改变。如果以下解决方案之一似乎不起作用，请仔细检查您正在导入的 Bootstrap 的版本号并尝试不同的。
您可以使用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 开始，我们已弃用下拉菜单中的 .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 的类与 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>
不确定其他人如何解决此问题或 Bootstrap 是否对此有任何配置。
我发现这个线程提供了一个解决方案：
https://github.com/twbs/bootstrap/issues/1411
其中一篇文章建议使用
<ul class="dropdown-menu" style="right: 0; left: auto;">
我测试过，它有效。
希望知道 Bootstrap 是否为此提供了配置，而不是通过上面的 css。
干杯。
基于引导文档：
从 v3.1.0 开始，下拉菜单中不推荐使用 .pull-right。使用 .dropdown-menu-right
例如：
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
如果要向上显示菜单，只需添加类“dropup”
并删除类“dropdown”（如果存在于同一个 div）。
<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);
});
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;">
如何做到这一点不是屏幕的相对一侧（作为用户@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>