Riga di bootstrap con colonne di diversa altezza

Al momento ho qualcosa come:

Content
Content
Content
Content
Content
Content
Content
Content
Content

Ora, supponendo che, il content fosse scatole di diversa altezza, con la stessa larghezza – come potevo mantenere lo stesso “layout basato sulla griglia” e tuttavia avere tutte le scatole allineate l’una sotto l’altra, anziché in linee perfette.

Attualmente TWBS posizionerà la riga successiva di col-md-4 sotto l’elemento più lungo nella terza riga precedente, quindi ogni riga di elementi è perfettamente allineata e pulita – mentre questa è fantastica voglio che ogni elemento ricada direttamente sotto l’ultimo elemento (Layout “Massoneria”)

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

Il ” problema di altezza ” di Bootstrap 3 si verifica perché le colonne usano float:left . Quando una colonna è “fluttuante”, viene portata fuori dal normale stream del documento. Viene spostato a sinistra o a destra fino a quando tocca il bordo della sua casella di contenimento. Quindi, quando si hanno altezze della colonna non uniformi , il comportamento corretto è quello di impilarle sul lato più vicino.

Colonne di avvolgimento irregolari Bootstrap

Nota : le opzioni seguenti sono applicabili agli scenari di avvolgimento di colonne in cui sono presenti più di 12 unità di misura in un singolo file .row . Per i lettori che non capiscono perché ci saranno mai più di 12 colonne in una riga , o pensate che la soluzione sia quella di “usare righe separate” , leggere prima questo


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

1 – L’approccio ‘clearfix’ ( raccomandato da Bootstrap ) come questo (richiede l’iterazione ogni X colonne). Questo costringerà ad avvolgere ogni X numero di colonne …

inserisci la descrizione dell'immagine qui

 
Content
Content
Content
Content
Content
Content
Content
Content
Content

Demo Clearfix (livello singolo)

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

C’è anche una variazione solo CSS del ‘clearfix’
Clearfix solo CSS con tabelle


2 – Rendi le colonne della stessa altezza (usando la flexbox):

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

inserisci la descrizione dell'immagine qui

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

Flexbox altezza uguale Demo


3 – Un-float delle colonne un uso inline-block invece ..

Ancora, il problema dell’altezza si verifica solo perché le colonne sono flottate. Un’altra opzione è impostare le colonne da display:inline-block e float:none . Ciò fornisce anche una maggiore flessibilità per l’allineamento verticale. Tuttavia, con questa soluzione non devono esserci spazi bianchi HTML tra le colonne , altrimenti gli elementi inline-block hanno spazio aggiuntivo e si chiuderanno prematuramente.

Demo di correzione del blocco in linea


4 – Approccio a colonne CSS3 (soluzione simile a Masonry / Pinterest) ..

Questo non è nativo di Bootstrap 3, ma un altro approccio che usa le 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 : Demo di tabs di muratura Bootstrap 4 .

Demo multi-colonne Bootstrap 3

5 – Approccio JavaScript / jQuery in massoneria

Infine, potresti voler usare un plugin come Isotope / Massoneria: inserisci la descrizione dell'immagine qui

Bootstrap Masonry Demo
Dimostrazione della muratura 2


Altro sulle colonne di altezza variabile Bootstrap


Aggiornamento 2018
Tutte le colonne hanno uguale altezza in Bootstrap 4 perché utilizza la flexbox per impostazione predefinita, quindi il “problema di altezza” non è un problema. Inoltre, Bootstrap 4 include questo tipo di soluzione multi-colonne: Demo di tabs di muratura Bootstrap 4 .

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

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

La sum del col all’interno del bootsrap di Twitter dovrebbe essere ogni volta 12. Ciò manterrà un design pulito della griglia:

  
Content
Content
Content
Content
Content
Content
Content
Content
Content