html - ordenar - rejillas bootstrap 4

Fila Bootstrap con columnas de diferentes alturas

Question

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>

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

Answer 1

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 apilarlas al lado más cercano.

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

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

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

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 .

Answer 2

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

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

Answer 3

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