Bootstrap网格中可变/不均匀的项目数

Question

我有一个从CMS填充的网格。我不知道物品的数量是奇数还是偶数。该设计需要桌面上的3列

和移动设备上的2列

如果只有一个，则最后一个项目居中。 我发现这样做的唯一方法是通过编程方式检查项目数量，并使用col-xs-6作为偶数集的最后一个，或col-xs-12作为奇数集的最后一个。

<div class="row partners">
    <div class="container">
        <h1>Our Partners.</h1>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="images/headshot.jpg" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="images/headshot.jpg" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="headshot-wrapper">
                <p><img src="images/headshot.jpg" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
    </div>
</div>

我想知道是否有办法在没有编程逻辑的情况下实现这一点。如果Bootstrap有“贪婪”列填充网格的剩余列，如果不使用它会很好吗？

Answer 1

Floats不喜欢居中，所以接近这个的好方法是使用内联块代替

添加＆＃34;居中＆＃34;类到行：

<div class="row partners centered"> 

修改列的工作方式：

.centered {
    text-align: center;
    font-size: 0;
}
.centered > div {
    float: none;
    display: inline-block;
    text-align: center;
}

实施例： https://jsfiddle.net/d2gcf39w/

另请注意，Bootstrap容器层次结构是Container＆gt;行＆gt; Col所以应该交换示例中的前两行：

<div class="container">
    <div class="row partners centered">
        <h1>Our Partners.</h1>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="https://placehold.it/100x100" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="https://placehold.it/100x100" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="https://placehold.it/100x100" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="https://placehold.it/100x100" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="headshot-wrapper">
                <p><img src="https://placehold.it/100x100" /></p>
            </div>
            <h2>Partnername</h2>
        </div>
    </div>
</div>