我有一个案例,我希望我的 bootstrap 列本身水平居中。
为此,我使用了以下规则
CSS:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
那么如果有 4 列,它们应该排成一行。如果有 3 列,那么它们应该居中。
HTML:
<!-- The fourth column falls down -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
如果我只有 1,2 或 3 列,它工作正常,但当我得到 4 列时,其中一列会下降到一个新行。为了解决这个问题,我尝试将宽度减小为 24.7%
。但这同样不适用于所有屏幕。所以我必须不断改变宽度。
我很想知道为什么宽度 25%
没有占用 25%
宽度并下降。以及如何解决这个问题并始终以它们为中心。
最佳答案
请删除:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
你可以添加到 .row 类:
.row {
display: flex;
justify-content: center;
}
如果您使用的是 bootstrap v4,则添加了 flexbox 类,您可以使用它们: https://v4-alpha.getbootstrap.com/utilities/flexbox/
关于css - 水平居中的 Bootstrap 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42924465/