我是 Bootstrap 的新手,正在了解它。我试图将下拉菜单放置在页面的中央,我设法将切换菜单的链接居中,但此菜单显示不正确。
这是我尝试过的:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
显然链接是中心的,因为我正在使用 .text-center
作为包含所有内容的 div,我尝试使用类 center-block
但它没有帮助。有什么提示吗?
最佳答案
dropdown 是一个 block 元素,用 text-align:center 对齐它对 block 元素不起作用。尝试在下拉 div 上添加 display: inline-block。查看 jsfiddle 前。 http://jsfiddle.net/kuyabiye/KLH8S/
<style>
.dropdown-center {
text-align: center;
}
.dropdown-center .dropdown {
display: inline-block;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 dropdown-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
关于html - 如何使用 Bootstrap 将 div 的内容居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20857854/