我在页面中央有一个下拉按钮,但是当我单击下拉列表时,实际的下拉部分仍然在页面的左侧。问题出在哪里?
.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
内。
此外,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>
我在尝试解决类似问题时发现了这个问题。感谢弗拉基米尔·罗德金
.dropdown-menu-center {
right: auto;
left: 50%;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}
https://jsfiddle.net/VovanR/2ao5b22h/
如果你不想改变你的html代码,这是css将解决你的问题:
.dropdown {text-align:center;}
.button, .dropdown-menu {margin:10px auto}
.dropdown-menu {width:200px; left:50%; margin-left:-100px;}
jsfiddle.net 的例子。
菜单的内容居中对齐,则
ul.dropdown-menu>li {
text-align: center;
}
可能会解决问题。
使用 Bootstrap 5,您可以在页面加载后使用 JavaScript 覆盖 Popper.js如下所示:
new bootstrap.Dropdown(document.getElementById('dropdown_button'), {
popperConfig: function () {
return {placement: 'bottom'}
}
});
<小时 />官方文档:https://getbootstrap.com/docs/5.0/components/dropdowns/#using-function-with-popperconfig
以下是您可以覆盖的展示位置:https://popper.js.org/docs/v2/constructors/#options
它的div 类中添加对齐方式