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