Fila Bootstrap con columnas de diferentes alturas

Actualmente tengo algo como:

Content
Content
Content
Content
Content
Content
Content
Content
Content

Suponiendo que el content fuera cajas de diferentes alturas, con el mismo ancho, ¿cómo podría mantener el mismo “diseño basado en cuadrículas” y tener todas las cajas alineadas una debajo de la otra, en lugar de líneas perfectas?

Actualmente TWBS colocará la siguiente línea de col-md-4 debajo del elemento más largo en la tercera fila anterior. Por lo tanto, cada fila de elementos está perfectamente alineada y limpia, mientras que esto es impresionante. Quiero que cada elemento caiga directamente debajo del último elemento (Diseño de “mampostería”)

Esta es una pregunta popular de Bootstrap, así que actualicé y amplié la respuesta para Bootstrap 3 y Bootstrap 4 …

El ” problema de altura ” Bootstrap 3 ocurre porque las columnas usan float:left . Cuando una columna se “flota”, se saca del flujo normal del documento. Se desplaza hacia la izquierda o hacia la derecha hasta que toca el borde de su caja contenedora. Entonces, cuando tienes alturas desiguales de columna , el comportamiento correcto es astackrlas al lado más cercano.

Columnas de envoltura desiguales Bootstrap

Nota : Las siguientes opciones son aplicables para escenarios de envolvente de columna donde hay más de 12 unidades de columna en un solo .row . Para los lectores que no entienden por qué habrá más de 12 cols consecutivos , o piensan que la solución es “usar filas separadas” debería leer esto primero


Hay algunas maneras de solucionar esto … (actualizado para 2018)

1 – El enfoque ‘clearfix’ ( recomendado por Bootstrap ) como este (requiere iteración cada X columnas). Esto obligará a envolver cada X cantidad de columnas …

enter image description here

 
Content
Content
Content
Content
Content
Content
Content
Content
Content

Demostración de Clearfix (nivel único)

Demo de Clearfix (niveles receptivos) – ej. col-sm-6 col-md-4 col-lg-3

También hay una variación de CSS del ‘clearfix’
CSS-only clearfix con tablas


2 – Haga que las columnas tengan la misma altura (usando flexbox):

Como el problema se debe a la diferencia de altura, puede hacer que las columnas tengan la misma altura en cada fila. Flexbox es la mejor manera de hacerlo, y es compatible nativamente con Bootstrap 4

enter image description here

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

Demostración de igual altura Flexbox


3 – Desanclar las columnas y usar un bloque en línea en su lugar …

Nuevamente, el problema de altura solo ocurre porque las columnas están flotando. Otra opción es configurar las columnas para display:inline-block y float:none . Esto también proporciona más flexibilidad para la alineación vertical. Sin embargo, con esta solución no debe haber espacio en blanco HTML entre las columnas , de lo contrario, los elementos del bloque en línea tienen espacio adicional y se envolverán prematuramente.

Demo del arreglo de bloque en línea


4 – Aproximación de columnas CSS3 (Masonry / Pinterest como solución) ..

Esto no es nativo de Bootstrap 3, sino otro enfoque que usa CSS multi-columnas . Una desventaja de este enfoque es que el orden de las columnas es de arriba a abajo en lugar de ir de izquierda a derecha. Bootstrap 4 incluye este tipo de solución : Bootstrap 4 Masonry cards Demo .

Demostración multi-columnas Bootstrap 3

5 – Masonry JavaScript / jQuery approach

Por último, es posible que desee utilizar un complemento como Isótopo / Albañilería: enter image description here

Bootstrap Masonry Demo
Demostración de mampostería 2


Más sobre Columnas de altura variable Bootstrap


Actualización 2018
Todas las columnas tienen la misma altura en Bootstrap 4 porque usa flexbox de forma predeterminada, por lo que el “problema de altura” no es un problema. Además, Bootstrap 4 incluye este tipo de solución de columnas múltiples: Bootstrap 4 Masonry cards Demo .

Por alguna razón, esto funcionó para mí sin la clase .display-flex

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

La sum del col dentro de Twitter bootsrap debe ser cada vez 12. Esto mantendrá un diseño de cuadrícula limpio:

  
Content
Content
Content
Content
Content
Content
Content
Content
Content