如何在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

与引导的列的问题是，你不能让列相同的高度。我建议你为此使用flex。