twitter-bootstrap 使用 Bootstrap 居中下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13547687/
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
Centering dropdown menu using Bootstrap
提问by user1328021
I'm trying to center my dropdown menu in Bootstap.
我试图在 Bootstap 中将我的下拉菜单居中。
<ul class="dropdown-menu">
It pulls to the left by default, or I could use pull-rightdefined as follows to make it go to the right:
默认情况下它向左拉，或者我可以使用pull-right如下定义来使它向右移动：
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
I want to center it though. I'm new to Boostrap and can't figure out how to center it. Any tips? I tried right:50% but that didn't work.
不过我想居中。我是 Boostrap 的新手，不知道如何将它居中。有小费吗？我试过正确：50% 但这没有用。
Note: I'm not looking to center the actual text in the dropdown menu. I'm looking to center the actual dropdown menu and carret under the navigation menu item that it drops down from.
注意：我不希望将下拉菜单中的实际文本居中。我希望将实际的下拉菜单和 carret 放在它下拉的导航菜单项下。
Here is my full code snippet in my template:
这是我模板中的完整代码片段：
<ul class="nav">
<li id="tab_profile">
<a href="{% url profile_detail user.username %}">{% trans "PROFILE" %}</a>
</li>
<li id="product_data">
<a href="{% url all_models %}">{% trans "PRODUCT DATA" %}</a>
</li>
<li id="product_library">
<a href="{% url library %}">{% trans "LIBRARY" %}</a>
</li>
<li id="database">
<a href="/DATABASE/">{% trans "DATABASE" %}</a>
</li>
<li class="dropdown" id = "community">
<a class="dropdown-toggle" href="#">COMMUNITY</a>
<ul class="dropdown-menu pull-right">
<li> <a href="/profiles">Search</a></li>
<li><a href="/questions/">Questions and Answers</a></li>
<li><a href="{% url view_requests %}">Requests</a></li>
</ul>
</li>
</ul>
CSS:
CSS：
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu.pull-right {
margin-right: auto;
margin-left: auto;
}
回答by Andrew Parker
.dropdown-menu {
left: 50% !important;
margin-left: -70px;
}
This worked for me when using a default bootstrap drop down menu. Just adjust the margin-left depending on how wide your menu is.
使用默认引导程序下拉菜单时，这对我有用。只需根据菜单的宽度调整 margin-left 即可。
回答by Chetan Patel
You can add below as CSS and give this class in tag as shown below.
您可以将下面添加为 CSS 并在标签中提供此类，如下所示。
.centerDropdown {
left: auto !important;
right: -25% !important;
}
.centerDropdown:after {
left: auto !important;
right: 45% !important;
}
In HTML Code,
在 HTML 代码中，
<li class="dropdown">
<a href="/channel/list" data-toggle="dropdown" class="dropdown-toggle">
<i class="icon-th-list"></i>
Lists
</a>
<ul class="dropdown-menu centerDropdown">
<li><a href="/list">Find a list</a></li>
<li><a href="/my">My lists</a></li>
<li><a href="/create">Create a list</a></li>
</ul>
</li>
回答by Jeph K.
This response a bit late, but hopefully will be useful. To center a Bootstrap dropdown menu with regard to its parent, try this.
这个回复有点晚了，但希望会有用。要将 Bootstrap 下拉菜单与其父项居中，请尝试此操作。
.dropdown-menu {
left: -40px;
right: -40px;
}
Adjust size as needed, just make sure the number values (40px in this example) match each other. Here, this pulls the left and right sides of the dropdown menu 40px to the left and 40px to the right of the parental/originating link, respectively.
根据需要调整大小，只需确保数值（本例中为 40px）相互匹配。在这里，这将下拉菜单的左侧和右侧分别向父/原始链接的左侧和右侧拉动 40 像素。
BONUS ROUND: In the event a list item's text extends wider than the menu, consider adding the following declaration.
奖励回合：如果列表项的文本扩展得比菜单宽，请考虑添加以下声明。
.dropdown-menu>li>a {
white-space: normal;
}
