Aggiunta di margini sinistro e destro agli elementi nella riga bootstrap

Question

Im un po 'confuso perché bootstrap non applica margini sinistro e destro alle colonne, tutto ciò che voglio è una riga semplice con 3 colonne che hanno come margine orizzontale 20px tra di loro. Se provi a fare quello bootstrap semplicemente clip uno dei div alla riga successiva.

html

<div class="container"> 

    <div class="row"> 

    <div class="col-md-4"><p>Box 1</p></div> 
    <div class="col-md-4"><p>Box 1</p></div> 
    <div class="col-md-4"><p>Box 1</p></div> 

    </div> 

</div> 

css

.col-md-4 { 
    background-color: tomato; 
    margin: 20px 5px; 
} 

Answer 1

Prova a modificare:

.col-md-4 { 
    background-color: tomato; 
    margin: 20px 5px !important; 
} 

Answer 2

per un po 'più di distanza si potrebbe fare:

<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div> 
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div> 
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div> 

Answer 3

Bootstrap scivola in una nuova riga perché la layout colonna è 12 colonne max.

Se si dispone di 3 div * (larghezza 4 col + margine-destra) si superano le 12 colonne fornite.

È possibile impostare il div un po 'più sottile, vale a dire 3 colonne bootstrap medie, in questo modo:

<div class="col-md-3 custom-box"><p>Box 1</p></div> 
<div class="col-md-3 custom-box"><p>Box 1</p></div> 
<div class="col-md-3 custom-box"><p>Box 1</p></div> 

e applicare la regola CSS in questo modo:

.custom-box{ 
    margin-right: 20px 5px!important; 
    background-color: tomato; 
} 

ecco un FIDDLE

Answer 4

I margini sinistro e destro delle colonne distruggono il comportamento della griglia di Bootstrap. Non modificare le classi di Bootstrap. Aggiungi le tue classi invece.

Nel tuo esempio inserisci un ulteriore <div>nella colonna. E dargli un margine.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="spacer"> 
       <p>Box 1</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.spacer { 
    background-color: tomato; 
    margin: 20px 5px; 
} 

Demo