marge de grille Bootstrap

Question

J'ai jsFiddle ici: http://jsfiddle.net/nH5WP/

Il est un super simple grille 3 x 3 en utilisant Bootstrap 3

Je veux ajouter des marges à droite et en bas de chaque bloc.

Le dernier bloc dans chaque ligne est en baisse vers le bas, je supprimerais normalement la marge de droite sur le dernier bloc dans chaque ligne avec quelque chose comme

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

mais cela ne semble pas fonctionner.

Comment puis-je ajouter des marges entre chaque bloc de cette grille?

<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

Vous ne pouvez pas créer dans le système de grille d'amorçage « gouttière » à l'aide margin:. Bootstrap utilise un rembourrage pour construire des gouttières, donc vous devez placer un div wrapper autour de vos colonnes et de vos pads. Pour plus d'informations, voir How to adjust gutter in Bootstrap 3 grid system? pour plus d'informations.

Answer 2

Changer chaque:

class="col-xs-4 box" 

à

class="col-xs-3 box" 

Vous pouvez le voir dans http://jsfiddle.net/nH5WP/8/

Answer 3

Appliquer width:calc(33.33% - 10px); en classe boîte.