html - ordenar - rejillas bootstrap 4
Fila Bootstrap con columnas de diferentes alturas (3)
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")
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
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 .
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>
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;
}