CSS twitter bootstrap 下拉菜单的对齐方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15115204/
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
alignment for twitter bootstrap dropdown-menu
提问by Ya Basha
I have designed a bootstrap navbar with dropdown menu
我设计了一个带有下拉菜单的引导导航栏
http://jsfiddle.net/yabasha/fex8N/3/
http://jsfiddle.net/yabasha/fex8N/3/
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</div>
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
}
Is there a way to change the default alignment for the dropdown-menu (from left to center / right) so the arrow would display in center / right?
有没有办法更改下拉菜单的默认对齐方式（从左到中/右），以便箭头显示在中心/右？
采纳答案by Shail
JSfiddle with your example http://jsfiddle.net/shail/fex8N/5/
JSfiddle 与您的示例http://jsfiddle.net/shail/fex8N/5/
change the following code to your liking to center the drop down caret :
根据您的喜好更改以下代码以将下拉插入符居中：
.navbar .nav > li > .dropdown-menu:after {
left: 83px; /change to your liking/
}
.navbar .nav > li > .dropdown-menu:before {
left: 83px; /keep values in after and before same /
}
To align the li elements to the right side :
要将 li 元素与右侧对齐：
.dropdown-menu > li > a {
text-align:right;
}
To align the li elements to the center :
要将 li 元素与中心对齐：
.dropdown-menu > li > a {
text-align:center;
}
回答by camilokawerin
It's better to avoid the use of pxfor positioning, since the dropdown′s width may change. This would be more appropriate for centering the caret:
最好避免使用pxfor 定位，因为下拉的宽度可能会改变。这更适合将插入符号居中：
.navbar .nav > li > .dropdown-menu.pull-center:after {
left: 50%;
margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
left: 50%;
margin-left: -7px;
}
For right alignment, you just need to add the class pull-rightto the dropdown:
对于右对齐，您只需要将类添加pull-right到下拉列表中：
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<!-- your menu -->
</ul>
</li>
回答by Chetan Patel
I have implemented this in my project and have answered in below link.
我已经在我的项目中实现了这个，并在下面的链接中回答了这个问题。
回答by Mohit Verma
<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Write Post</a></li>
<li><a href="#">Posts List</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
<label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label>
<span class="caret" data-toggle="dropdown"></span>
</div>
In this way you can align menu to left or right according to your choice.
通过这种方式，您可以根据自己的选择将菜单向左或向右对齐。
