css - 水平居中的 Bootstrap 列

Question

JSFIDDLE

我有一个案例，我希望我的 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% 宽度并下降。以及如何解决这个问题并始终以它们为中心。

JSFIDDLE

Answer 1

请删除:

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/