CSS Bootstrap：下拉菜单相对于导航栏项目的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17904862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Position of dropdown menu relative to navbar item
提问by curious1
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?
下拉的左上角在文字的左下角（Action），但是我希望dropdwon的右上角的位置在文字的右下角。我怎样才能做到这一点？
回答by Joe Czucha
This is the effect that we're trying to achieve:
这是我们想要达到的效果：
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importingand try a different one.
需要应用的类随着 Bootstrap 3.1.0 和 Bootstrap 4 的发布而改变。如果以下解决方案之一似乎不起作用，请仔细检查您正在导入的 Bootstrap 的版本号并尝试不同的。
Bootstrap 3
引导程序 3
Before v3.1.0
v3.1.0之前
You can use the pull-rightclass to line the right hand side of the menu up with the caret:
您可以使用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/
After v3.1.0
v3.1.0之后
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
从 v3.1.0 开始，我们已弃用下拉菜单上的 .pull-right。要右对齐菜单，请使用 .dropdown-menu-right。导航栏中右对齐的导航组件使用此类的 mixin 版本来自动对齐菜单。要覆盖它，请使用 .dropdown-menu-left。
You can use the dropdown-rightclass to line the right hand side of the menu up with the caret:
您可以使用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/
Bootstrap 4
引导程序 4
The class for Bootstrap 4 are the same as Bootstrap > 3.1.0, just watch out as the rest of the surrounding markup has changed a little:
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>
回答by curious1
Not sure about how other people solve this problem or whether Bootstrap has any configuration for this.
不确定其他人是如何解决这个问题的，或者 Bootstrap 是否有任何配置。
I found this thread that provides a solution:
我发现这个线程提供了一个解决方案：
https://github.com/twbs/bootstrap/issues/1411
https://github.com/twbs/bootstrap/issues/1411
One of the post suggests the use of
其中一篇文章建议使用
<ul class="dropdown-menu" style="right: 0; left: auto;">
I tested and it works.
我测试过，它有效。
Hope to know whether Bootstrap provides config for doing this, not via the above css.
希望知道 Bootstrap 是否提供了这样做的配置，而不是通过上面的 css。
Cheers.
干杯。
回答by ninetiger
Based on Bootstrap doc:
基于 Bootstrap 文档：
As of v3.1.0, .pull-right is deprecated on dropdown menus. use .dropdown-menu-right
从 v3.1.0 开始，下拉菜单中不推荐使用 .pull-right。使用 .dropdown-menu-right
eg:
例如：
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
回答by Philip Enc
If you want to display the menu up, just add the class "dropup"
and remove the class "dropdown" if exists from the same div.
如果要向上显示菜单，只需添加类“dropup”
并删除同一个div中存在的类“dropdown”。
<div class="btn-group dropup">
回答by JD11
Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.
即使很晚，我希望我能帮助别人。如果下拉菜单或子菜单在屏幕右侧，则在左侧打开，如果菜单或子菜单在左侧，则在右侧打开。
$(".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);
});
回答by Andrei Stalbe
Boostrap has a class for that called navbar-right. So your code will look as follows:
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>
回答by John Dekker
If you wants to center the dropdown, this is the solution.
如果您想将下拉列表居中，这就是解决方案。
<ul class="dropdown-menu" style="right:auto; left: auto;">
回答by Salman Sa
use this code :
使用此代码：
<ul class="dropdown-menu" role="menu">
<li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>
