Html Bootstrap 居中对齐下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41917383/
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 center align a dropdown menu
提问by James Mitchell
I have a dropdown button in the center of my page, but when I click the dropdown, the actual dropdown part is still on the left side of the page. What's the issue?
我的页面中央有一个下拉按钮，但是当我单击下拉菜单时，实际的下拉部分仍然在页面的左侧。有什么问题？
HTML
HTML
<div class="row">
<div class="col-md-12 school-options-dropdown">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Add your school</a></li>
<li><a href="#">Hello</a></li>
</ul>
</div>
</div>
</div>
CSS
CSS
div.school-options-dropdown {
text-align: center;
}
.dropdown {
text-align:center;
}
.dropdown-menu {
text-align: center;
}
回答by John Bupit
You need to put the dropdown menu and the toggle button inside a .btn-group.
您需要将下拉菜单和切换按钮放在.btn-group.
Also, Bootstrap provides the .text-centerpropertyto align the contents. This can be used on .school-options-dropdown, instead of manually adding CSS.
此外，Bootstrap 提供了对齐内容的.text-center属性。这可以用于.school-options-dropdown，而不是手动添加 CSS。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 school-options-dropdown text-center">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Add your school</a></li>
<li><a href="#">Hello</a></li>
</ul>
</div>
</div>
</div>回答by Filip
I've found this when trying to solve similar problem. Credit to Vladimir Rodkin
我在尝试解决类似问题时发现了这一点。感谢弗拉基米尔·罗德金
.dropdown-menu-center {
right: auto;
left: 50%;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}
回答by Stanislav Belichenko
If you don't want change your html code, this is css will solve your problem:
如果您不想更改 html 代码，这是 css 将解决您的问题：
.dropdown {text-align:center;}
.button, .dropdown-menu {margin:10px auto}
.dropdown-menu {width:200px; left:50%; margin-left:-100px;}
回答by sid-m
If you are looking to center align the contents of the menu, then
如果您希望将菜单内容居中对齐，则
ul.dropdown-menu>li {
text-align: center;
}
might do the trick.
可能会起作用。
回答by Matthew Barker
Make sure you add the alignment in the entire div class defining it
确保在定义它的整个 div 类中添加对齐
