Bootstrap margine

Question

griglia

Ho un jsfiddle qui: http://jsfiddle.net/nH5WP/

E 'un super semplice griglia 3 x 3 con Bootstrap 3

voglio aggiungere margini a destra e in basso di ogni blocco.

L'ultimo blocco di ogni linea è caduta giù, io normalmente rimuovere il margine destro sull'ultimo blocco di ogni riga con qualcosa come

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

, ma questo non sembra funzionare.

Come posso aggiungere margini tra ciascun blocco in questa griglia?

<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

Non è possibile creare una "gronda" nel sistema di rete di bootstrap usando margin:.

Bootstrap utilizza il riempimento per creare grondaie, quindi è necessario inserire un wrapper div attorno alle colonne e ai pad.

Vedere How to adjust gutter in Bootstrap 3 grid system? per ulteriori informazioni.

Answer 2

cambio ogni:

class="col-xs-4 box" 

a

class="col-xs-3 box" 

Lo si può vedere in http://jsfiddle.net/nH5WP/8/

Answer 3

Applicare width:calc(33.33% - 10px); in classe scatola.