我已经回顾了这个answer,它将帮助我实现我的最终目标(通过调整CSS)但我的问题是关于bootstrap为我们提供的组件和样式。
问题:下拉按钮根据需要对齐,但下拉菜单未对齐。尝试调整窗口大小以验证小型设备,平板电脑尺寸。
通过修改col-sm-12
来更改列数也会有所帮助,但错位仍然存在于小型设备上。
这是最小,完整和可验证:JsFiddle Example
<div class="container-fluid">
<div class="row justify-content-center text-center">
<div class="col-sm-12 align-self-center">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Category
</button>
<div class="dropdown-menu"
aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Category1</a>
<a class="dropdown-item" href="#">Category2</a>
<a class="dropdown-item" href="#">Category3</a>
</div>
</div>
</div>
</div>
</div>
允许我们居中对齐的两个类 -
justify-content-center
:
https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
text-center
:https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
问题:
答案 0 :(得分:8)
这是因为您的下拉菜单绝对定位 - 您需要覆盖它的样式并将其放置在中心而不是左侧:
.justify-content-center .dropdown-menu {
left: 50%;
transform: translateX(-50%);
}