Fila de Bootstrap con columnas de diferente altura.


88

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

Respuestas:


167

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

Bootstrap columnas de envoltura desigual

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

ingrese la descripción de la imagen aquí

<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


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

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

ingrese la descripción de la imagen aquí

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

Demostración Flexbox de igual altura


3 - Elimine la flotación de las columnas y utilice un bloque en línea en su lugar.

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: ingrese la descripción de la imagen aquí

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 .


Aquí hay una buena guía sobre alineación vertical en bootstrap v4-alpha.getbootstrap.com/layout/grid . Particularmente alineación vertical y clase "row align-items-start"
Josh

2
¡Guau! usted gana mi voto a favor de este bootply.com/120682 . Con el complemento Masonry, se ve bien en la carga de la página, no bien cuando se arrastra para ajustar el ancho de la pantalla
Paullo

11

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

Esto funcionó para mí. Solo puse el segundo CSS en la propiedad
.col

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.