Html 使用CSS。水平居中放置数量可变的项目

我使用的是bootstrap，我在一行中有不同数量的div和col-sm-4

当它是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>

---

但是对于mod 2，我找不到方法。如果我将float none应用于两者，它们将一个接一个。

引导网格是基于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>

内容
内容
内容
内容

Flexbox可能会在这里介绍您

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

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

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

---

试试这个。。。。或者类似的东西

它打破了东西，但这让我走上了正确的方向。谢谢。

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