Bootstrap中心对齐下拉菜单 [英] Bootstrap center align a dropdown menu
本文介绍了Bootstrap中心对齐下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在页面中心有一个下拉按钮,但是当我单击该下拉菜单时,实际的下拉部分仍位于页面的左侧.有什么问题吗?
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
<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
div.school-options-dropdown {
text-align: center;
}
.dropdown {
text-align:center;
}
.dropdown-menu {
text-align: center;
}
推荐答案
您需要将下拉菜单和切换按钮放在.btn-group
内.
You need to put the dropdown menu and the toggle button inside a .btn-group
.
此外,Bootstrap提供了 .text-center
属性来对齐内容.可以在.school-options-dropdown
上使用它,而不必手动添加CSS.
Also, Bootstrap provides the .text-center
property to align the contents. This can be used on .school-options-dropdown
, instead of manually adding 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>
这篇关于Bootstrap中心对齐下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文