使用CSS.水平居中可变数量的项目

Question

我正在使用引导程序，并且我在一行中有一个可变数量的带有col-sm-4的div

当它是 3 的倍数时看起来很棒：

<section>
<div class="row">
<div class="col-sm-4">Content</div>
<div class="col-sm-4">Content</div>
<div class="col-sm-4">Content</div>
<div class="col-sm-4">Content</div>
</div>
</section>

但是任何其他情况都会给我留下漂浮的项目。

当模组为 1 时，这有效：

.row div:last-child{
float: none;
margin: auto;
}

但是对于 mod 2，我找不到方法。如果我将浮点数 none 应用于两者，它们将一个放在另一个下面。

Answer 1

Flexbox 可能会在这里为您提供帮助。

.row {
display: flex;
justify-content: center;
}

虽然不太熟悉Bootstrap，所以它很可能会破坏东西。

Answer 2

引导网格是基于 12 的，所以你不能使用你的代码试试这个

<section>
<div class="row">
<div class="col-sm-3">Content</div>
<div class="col-sm-3">Content</div>
<div class="col-sm-3">Content</div>
<div class="col-sm-3">Content</div>
</div>
</section>

Answer 3

.row div:nth-child(4n+1) {
float: none;
margin: auto;
clear:left;
} 

试试这个....或类似的东西