Come gestire le colonne Bootstrap 3 non c'è spazio?

Question

Sono nei guai con il nuovo sistema di griglia Bootstrap 3. Vorrei creare una griglia a 4 colonne. Quindi, ecco il mio codice:

<div class="row"> 
    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
</div> 

Il mio problema è che non c'è spazio tra le colonne. La griglia applica padding-left e padding-right alle colonne anziché margin-left e margin-right.

Quando rimuovo il padding e aggiungo il margine, crolla. Come posso aggiustare questo? o c'è qualcosa che non potrei capire?

Answer 1

Se non è possibile utilizzare il riempimento predefinito per creare spazi vuoti, è necessario aggiungere `margine-sinistra 'alle colonne appropriate e anche modificare la larghezza%.

Per esempio .col-lg-4 ha di solito la larghezza del 33%, in modo da dovreste diminuire un po '..

.col-lg-4 { 
    margin-left:15px; 
    width:31.6%; 
} 

http://bootply.com/74374

Un'altra opzione sarebbe quella di utilizzare un contenitore all'interno delle colonne, e poi il l'imbottitura funzionerà per creare gli spazi vuoti.

Answer 2

per più esatto della larghezza delle colonne è possibile utilizzare il css3 calc() operator

.col-lg-4 { 
    margin-left:15px; 
    width:31.6%; /* non-css3 fallback */ 
    width: calc(33.33333333% - 15px); /* css3 calculation */ 
} 

Answer 3

È necessario contenere che riga in una .container DIV . Altrimenti Bootstrap capisce che non ci dovrebbero essere spazi vuoti tra le colonne.

Answer 4

Ho postato questo here ma è ancora pertinente alla domanda originale e fornisce ulteriori informazioni su come funziona questo approccio.

Ho avuto problemi simili con lo spazio tra le colonne. Il problema di root è che le colonne in bootstrap 3 e 4 usano il padding al posto del margine. Quindi i colori di sfondo per due colonne adiacenti si toccano.

Ho trovato una soluzione adatta al nostro problema e molto probabilmente funzionerà per la maggior parte delle persone che cercano di spaziare colonne e mantenere le stesse larghezze di gronda del resto del sistema di griglia.

Questo era il risultato finale stavamo per

Avendo tagliato con ombreggiatura tra le colonne era problematico. Non volevamo spazio aggiuntivo tra le colonne. Volevamo solo che le grondaie fossero "trasparenti" in modo che il colore di sfondo del sito comparisse tra due colonne bianche.

questo è il codice per le due colonne

<div class="row"> 
    <div class="col-sm-7"> 
     <div class="raised-block"> 
      <h3>Facebook</h3> 
     </div> 
    </div> 
    <div class="col-sm-5"> 
     <div class="raised-block"> 
      <h3>Tweets</h3> 
     </div> 
    </div> 
</div> 

CSS

.raised-block { 
    background-color: #fff; 
    margin-bottom: 10px; 
    margin-left: 0; 
    margin-right: -0.625rem; // for us 0.625rem == 10px 
    padding-left: 0.625rem; 
    padding-right: 0.625rem; 
} 
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack 
    .raised-block { 
     margin-left: -0.625rem; 
    } 
} 
.row [class^="col-"]:first-child>.raised-block { 
    // this is so the first column has no margin so it will not be "indented" 
    margin-left: -0.625rem; 
} 

Questo approccio richiede un div interno con margini negativi proprio come gli usi bootstrap "riga" classe. E questo div, abbiamo chiamato "sollevato-block", deve essere il fratello diretta di una colonna

In questo modo si ottiene ancora adeguata imbottitura interna le colonne.Ho visto soluzioni che sembrano funzionare creando spazio, ma sfortunatamente le colonne che creano hanno un riempimento extra su entrambi i lati della riga, quindi finisce per rendere la riga più sottile per la quale è stato progettato il layout della griglia. Se si guarda l'immagine per l'aspetto desiderato, ciò significherebbe che le due colonne insieme sarebbero più piccole di quella più grande in alto, che interrompe la struttura naturale della griglia.

Lo svantaggio principale di questo approccio è che richiede una marcatura aggiuntiva che avvolge il contenuto di ciascuna colonna. Per noi funziona perché solo le colonne specifiche necessitavano di uno spazio tra loro per ottenere l'aspetto desiderato.

Spero che questo aiuti