Html 为什么 Bootstrap 导航下拉菜单向右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16682784/
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
Why is Bootstrap nav dropdown menu aligned to the right?
提问by yBrodsky
I am having a bootstrap dropdown. It works fine, but when I am inside a page accessed through the menu, then it gets weird:
我有一个引导下拉菜单。它工作正常，但是当我进入通过菜单访问的页面时，它变得很奇怪：
http://2.bp.blogspot.com/-vw49cpP7weo/UZw0Jh_zmhI/AAAAAAAACJc/oadR5CTIus0/s640/dropdown.png
http://2.bp.blogspot.com/-vw49cpP7weo/UZw0Jh_zmhI/AAAAAAAACJc/oadR5CTIus0/s640/dropdown.png
You can see in the picture, the menu is displaced to the right.
您可以在图片中看到，菜单向右移动。
I paste the code:
我粘贴代码：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"><i class="icon-chevron-right"></i> Zimil Ltda</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="index.html">Inicio</a></li>
<li><a href="acerca.html">Quienes somos</a></li>
<li class="active" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="jubilados.html">
Productos <i class="icon-caret-down"></i></a>
<ul class="dropdown-menu">
<li><a href="jubilados.html">Préstamos a jubilados</a></li>
<li><a href="cbu.html">Préstamos CBU</a></li>
<li><a href="otros.html">Otros créditos</a></li>
</ul>
</li>
<li><a href="trabajar.php">Trabajá con nosotros</a></li>
</ul>
</div>
</div>
</div>
回答by MarceloBarbosa
Just pull-right dropdown-menuworked for me.
刚刚pull-right dropdown-menu为我工作。
EDIT:
编辑：
Deprecated .pull-rightalignment
已弃用的.pull-right对齐方式
As of v3.1.0, we've deprecated .pull-righton 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.
回答by rposborne
.pull-righthas been deprecated as of Bootstrap 3.1.0
.pull-right自 Bootstrap 3.1.0 起已弃用
use
.dropdown-menu-right
用
.dropdown-menu-right
回答by Vince
As tested on version 3.3.2 of bootstrap, dropdown-menu-rightdoes not work for me either. Here's what I did to fix it in my case.
在 bootstrap 的 3.3.2 版上进行测试时，dropdown-menu-right对我也不起作用。这是我在我的情况下为修复它所做的。
Instead of:
代替：
<ul class="dropdown-menu dropdown-menu-right">
I used:
我用了：
<ul class="dropdown-menu" style="right: 0; left: auto;">
Works perfectly.
完美运行。
回答by thoroughly-confused
Try adding this to your css file or as style element this:
尝试将此添加到您的 css 文件或作为样式元素：
.dropdown-menu { left:auto; }
I had a similar problem with displaced drop-down and this worked for me.....
我在移位下拉菜单上遇到了类似的问题，这对我有用.....
回答by Leniel Maccaferri
Change:
改变：
<ul class="nav pull-right">
to
到
<ul class="nav pull-left">
OR just remove the helper class pull-rightleaving only the navclass:
或者只是删除助手类，pull-right只留下nav类：
<ul class="nav">
Here's a JS Bin demo: http://jsbin.com/ezuray/1/
这是一个 JS Bin 演示：http: //jsbin.com/ezuray/1/
