Riga bootstrap con colonne di diversa altezza

Al momento ho qualcosa come:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Ora supponendo che, content fossero scatole di diversa altezza, con la stessa larghezza - come potrei mantenere lo stesso "layout basato su griglia" e tuttavia avere tutte le scatole allineate l'una sotto l'altra, invece che in linee perfette.

Attualmente TWBS posizionerà la riga successiva col-md-4sotto l'elemento più lungo nella terza riga precedente., Quindi ogni riga di elementi è perfettamente allineata e pulita - anche se è fantastico, voglio che ogni elemento cada direttamente sotto l'ultimo elemento (layout "Muratura" )

Questa è una domanda popolare su Bootstrap, quindi ho aggiornato e ampliato la risposta per Bootstrap 3 e Bootstrap 4 ...

Il " problema di altezza " Bootstrap 3 si verifica perché le colonne utilizzano . Quando una colonna viene "flottata" viene tolta dal normale flusso del documento. Viene spostato a sinistra oa destra finché non tocca il bordo della sua scatola di contenimento. Quindi, quando si hanno altezze di colonna non uniformi , il comportamento corretto è impilarle sul lato più vicino.float:left

Nota : le opzioni seguenti sono applicabili per scenari di disposizione delle colonne in cui sono presenti più di 12 unità di colonna in una singola.row . Per i lettori che non capiscono perché ci dovrebbero essere più di 12 colonne di fila , o pensano che la soluzione sia "usare righe separate" dovrebbero leggere prima questo

Ci sono alcuni modi per risolvere questo problema .. (aggiornato per il 2018)

1 - L'approccio "clearfix" ( consigliato da Bootstrap ) come questo (richiede l'iterazione ogni X colonne). Questo forzerà un ritorno a capo ogni X numero di colonne ...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (livello singolo)

Clearfix Demo (livelli reattivi) - ad es.col-sm-6 col-md-4 col-lg-3

Esiste anche una variazione solo CSS del clearfix solo CSS "clearfix"
con tabelle

Poiché il problema è causato dalla differenza di altezza, puoi rendere le colonne uguali ad altezza su ogni riga. Flexbox è il modo migliore per farlo ed è supportato nativamente in Bootstrap 4 ...

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox uguale altezza Demo

Anche in questo caso, il problema di altezza si verifica solo perché le colonne sono flottate. Un'altra opzione è impostare le colonne su display:inline-blocke float:none. Ciò fornisce anche una maggiore flessibilità per l'allineamento verticale. Tuttavia, con questa soluzione non devono esserci spazi HTML tra le colonne , altrimenti gli elementi inline-block hanno spazio aggiuntivo e andranno a capo prematuramente.

Demo della correzione del blocco in linea

4 - Approccio colonne CSS3 (soluzione in muratura / Pinterest) ..

Questo non è nativo di Bootstrap 3, ma un altro approccio che utilizza multi-colonne CSS . Uno svantaggio di questo approccio è che l'ordine delle colonne è dall'alto verso il basso anziché da sinistra a destra. Bootstrap 4 include questo tipo di soluzione : Bootstrap 4 Masonry cards Demo .

Bootstrap 3 multi-colonne Demo

5 - Approccio JavaScript / jQuery in muratura

Infine, potresti voler utilizzare un plugin come Isotope / Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

Ulteriori informazioni sulle colonne ad altezza variabile Bootstrap

Aggiornamento 2018
Tutte le colonne hanno la stessa altezza in Bootstrap 4 perché utilizza flexbox per impostazione predefinita, quindi il "problema di altezza" non è un problema. Inoltre, Bootstrap 4 include questo tipo di soluzione multi-colonna: Bootstrap 4 Masonry cards Demo .

Per qualche ragione questo ha funzionato per me senza la classe .display-flex

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

Ho creato un'altra estensione (che è anche reattiva) alla riga di bootstrap. Puoi provare qualcosa di simile:

.row.flexRow { display: flex; flex-wrap: wrap;}