如何在Bootstrap中使用col-sm-6响应3项？

Question

我创建一个包含3列的价格表。

我的代码如下：

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6">
        </div>
    </div>
</div>

使用col-xx-4是完美的。仅在col-sm-4，我的页面才被破坏。像：

我决定使用col-sm-6，它显示为：

看起来不错。但是在最后一项，它应该在中心屏幕和 margin-top: 15px 看起来很漂亮。

我不知道该怎么做。有什么方法可以解决我的问题吗？

Answer 1

尝试使用偏移量

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-sm-offset-3">
        </div>
    </div>
</div>

Answer 2

Bootstrap列的问题在于您无法使列的高度相等。我建议您使用flex。