引導電網保證金

Question

我這裏有一個的jsfiddle：http://jsfiddle.net/nH5WP/

這是使用自舉3

我想利潤率添加到每個塊的右側和底部一個超級簡單的3×3格。

每行中的最後一個塊落下，我通常會用的東西去掉右邊距最後一個塊中的每一行像

.box:last-child{ 
    background: yellow; 
    margin: 0 0 10px 0; 
} 

但這似乎並沒有工作。

如何在此網格中的每個塊之間添加邊距？

<div class="container"> 

    <div class="row"> 
     <div class="col-xs-4 box"> 
      <p>One</p> 
     </div> 
     <div class="col-xs-4 box"> 
      <p>Two</p> 
     </div> 
     <div class="col-xs-4 box"> 
      <p>Three</p> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-4 box"> 
      <p>Four</p> 
     </div> 
     <div class="col-xs-4 box"> 
      <p>Five</p> 
     </div> 
     <div class="col-xs-4 box"> 
      <p>Six</p> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-4 box"> 
      <p>Seven</p> 
     </div> 
     <div class="col-xs-4 box"> 
      <p>Eight</p> 
     </div> 
     <div class="col-xs-4 box"> 
      <p>Nine</p> 
     </div> 
    </div> 

</div> 

Answer 1

您不能在引導網格系統中使用margin:創建「陰溝」。

引導程序使用填充來建立排水溝，所以您需要在您的列和墊上放置一個包裝div。

請參閱How to adjust gutter in Bootstrap 3 grid system?瞭解更多信息。

每個

Answer 2

變化：

class="col-xs-4 box" 

到

class="col-xs-3 box" 

你可以看到它在http://jsfiddle.net/nH5WP/8/

Answer 3

在框類應用width:calc(33.33% - 10px);。