Question

我使用bootstrap并且我在内排连续使用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>

但是任何其他情况都让我留下了左边的浮动物品。

这在mod为1时有效：

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

但对于mod 2我找不到方法。如果我将浮动无应用于两者，则它们会在另一个之下。

Answer 1

Flexbox可能会帮到你。

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

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

Answer 2

bootstrap网格是基于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;
}

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

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

3 个答案: