Deseamos enseñarte la mejor respuesta que descubrimos on line. Nosotros esperamos que te sea útil y si deseas compartir algún detalle que nos pueda ayudar a mejorar puedes hacerlo..
Solución:
Esta es una pregunta popular de Bootstrap, así que he actualizado y amplió la respuesta para Bootstrap 3 y Bootstrap 4…
los Arranque 3 El “problema de altura” 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 la caja que lo contiene. Entonces, cuando tienes alturas de columna desigualesel comportamiento correcto es apilarlos en el lado más cercano.
Nota: Las siguientes opciones son aplicables para envoltura de columna escenarios donde hay más de 12 unidades col en un solo .row. Para los lectores que no entienden por qué habría alguna vez más de 12 columnas seguidaso cree que la solución es “usar filas separadas”, debe leer esto primero
Hay algunas maneras de arreglar esto.. (actualizado para 2018)
1 – El enfoque ‘clearfix’ (recomendado por Bootstrap) como este (requiere iteración cada X columnas). Esto forzará una envoltura cada X número de columnas…
Content
Content
Content
Content
Content
Content
Content
Content
Content
Demostración de Clearfix (nivel único)
Clearfix Demo (niveles receptivos) – ej. col-sm-6 col-md-4 col-lg-3
También hay una variación de solo CSS del ‘clearfix’
Clearfix solo CSS con tablas
2 – Haz que las columnas tengan la misma altura (usando flexbox):
Dado que el problema es causado por el diferencia de altura, puedes hacer columnas igual altura en cada fila. Flexbox es la mejor manera de hacer esto, y es soportado de forma nativa en Bootstrap 4…
.row.display-flex
display: flex;
flex-wrap: wrap;
.row.display-flex > [class*='col-']
display: flex;
flex-direction: column;
Flexbox igual altura Demostración
3 – Deje de flotar las columnas y use el 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 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 debe haber sin espacios en blanco HTML entre columnasde lo contrario, los elementos del bloque en línea tienen espacio adicional y se ajustarán prematuramente.
Demostración de corrección de bloque en línea
4 – Enfoque de columnas CSS3 (albañilería/Pinterest como solución).
Esto no es nativo de Bootstrap 3, sino otro enfoque que utiliza columnas múltiples de CSS. Una desventaja de este enfoque es que el orden de las columnas es de arriba a abajo en lugar de de izquierda a derecha. Bootstrap 4 incluye este tipo de solución:
Bootstrap 4 Albañilería Demostración de tarjetas.
Demostración de Bootstrap 3 multicolumnas
5 – Enfoque de mampostería JavaScript/jQuery
Finalmente, es posible que desee utilizar un complemento como Isotope/Masonry:
Demostración de mampostería Bootstrap
Demostración de albañilería 2
Más sobre columnas de altura variable Bootstrap
Actualización 2018
Todas las columnas tienen la misma altura en Arranque 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 multicolumna: 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;
Si entiendes que ha sido de ayuda nuestro post, sería de mucha ayuda si lo compartieras con otros programadores así nos ayudas a difundir nuestra información.