Fila de Bootstrap con columnas de diferente altura.

Actualmente tengo algo como:

<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>

Ahora, suponiendo que fueran contentcajas de diferente altura, con el mismo ancho, ¿cómo podría mantener el mismo "diseño basado en cuadrícula" y aún tener todas las cajas alineadas una debajo de la otra, en lugar de en líneas perfectas?

Actualmente, TWBS colocará la siguiente línea col-md-4debajo del elemento más largo de la tercera fila anterior. Por lo tanto, cada fila de elementos está perfectamente alineada y limpia. Si bien esto es increíble, quiero que cada elemento esté directamente debajo del último elemento (diseño "Masonry" )

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

El " problema de altura " de Bootstrap 3 se produce porque las columnas utilizan . Cuando una columna “flota”, se saca del flujo normal del documento. Se desplaza hacia la izquierda o hacia la derecha hasta que toca el borde de la caja que lo contiene. Entonces, cuando tiene alturas de columna desiguales , el comportamiento correcto es apilarlas en el lado más cercano.float:left

Nota : Las opciones siguientes son aplicables para escenarios de envoltura de columnas donde hay más de 12 unidades de columna en una sola.row . Para los lectores que no entienden por qué habrá más de 12 columnas seguidas , o piensan que la solución es "usar filas separadas", deben leer esto primero.

Hay algunas formas de solucionar este problema ... (actualizado para 2018)

1 - El enfoque 'clearfix' ( recomendado por Bootstrap ) como este (requiere iteración cada X columnas). Esto forzará un ajuste cada X número de columnas ...

<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>

Demostración de Clearfix (un solo nivel)

Demostración de Clearfix (niveles receptivos) , por ejemplo.col-sm-6 col-md-4 col-lg-3

También hay una variación de solo CSS del 'clearfix'
clearfix solo de CSS con tablas

Dado que 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 hacer esto y es compatible de forma nativa en Bootstrap 4 ...

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

Demostración Flexbox de igual altura

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

Demostración de la corrección de bloques en línea

4 - Enfoque de columnas CSS3 (solución tipo Masonry / Pinterest).

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

Demostración de varias columnas de Bootstrap 3

5 - Enfoque de mampostería JavaScript / jQuery

Finalmente, es posible que desee utilizar un complemento como Isotope / Masonry:

Bootstrap Masonry Demo Demostración de
albañilería 2

Más sobre columnas de altura variable de 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 múltiples columnas: Bootstrap 4 Demostración de tarjetas de albañilería .

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;
}

Creé otra extensión (que también es reactiva) para la fila de arranque. Puedes probar algo como esto:

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