I bordi tra le colonne di Bootstrap Grid non funzionano

Question

Sto creando una pagina in bootstrap dove sto usando 4 colonne in una riga. Il codice:

<div class="row text-center"> 
    <div class="col-md-3"> </div> 
    <div class="col-md-3"> </div> 
    <div class="col-md-3"> </div> 
    <div class="col-md-3"> </div> 
</div> 

ho aggiunto una classe per ogni Col così ognuno poteva avere un bordo.

.cliente { 
    margin-top:10px; 
    border: #cdcdcd medium solid; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

Il problema è che i bordi devono essere separati dalla grondaia naturale della griglia bootstrap e che non funziona.

Potrebbe aiutarmi per favore? Grazie.

Answer 1

È necessario utilizzare un altro elemento di blocco (DIV) all'interno delle colonne poiché Bootstrap "col- *" utilizza il riempimento per creare la spaziatura o "grondaia" tra le colonne della griglia.

<div class="row text-center"> 
     <div class="col-md-3"> 
     <div class="cliente"> 
      .. 
     </div> 
     </div> 
</div> 

Demo: http://www.bootply.com/71ZVOWCFWu

Answer 2

È possibile utilizzare outline proprietà. NO div. cliente necessario.

.row > div { 
    margin-top:10px; 
    padding: 20px; 
    outline: 2px solid #ccc; 
    outline-offset: -10px; 
    -moz-outline-radius: 10px; 
    -webkit-outline-radius: 10px; 
} 

Answer 3

ho fatto una versione che non richiede elementi aggiuntivi, ma potrebbe soffrire di altezze ineguali:

How can I add a line between two columns using Twitter Bootstraps grid system

Answer 4

Per espandere sulla soluzione outline, se si desidera un bordo che crolla a la stessa dimensione se due colonne adiacenti hanno entrambi bordi, utilizzare box-shadow:

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc; 

lo svantaggio a box-shadow rispetto a outline è che box-shadow può essere visualizzato da qualsiasi browser in una posizione subpixel, mentre i contorni e i bordi scorrono al pixel più vicino. Se box-shadow finisce in una posizione subpixel, apparirà sfumato o sfocato. L'unico modo per evitarlo è assicurarti di non fare cose che possano far allineare la colonna su una posizione subpixel.