La guía paso a paso o código que hallarás en este artículo es la resolución más sencilla y efectiva que hallamos a tus dudas o dilema.
Solución:
Solución 4 usando Bootstrap 4
Bootstrap 4 usa Flexbox, por lo que no hay necesidad de CSS adicional.
Manifestación
some content
catz
Solución 1 usando márgenes negativos (no rompe la capacidad de respuesta)
Manifestación
.row
overflow: hidden;
[class*="col-"]
margin-bottom: -99999px;
padding-bottom: 99999px;
Solución 2 usando tabla
Manifestación
.row
display: table;
[class*="col-"]
float: none;
display: table-cell;
vertical-align: top;
Solución 3 usando flex agregado en agosto de 2015. Los comentarios publicados antes de esto no se aplican a esta solución.
Manifestación
.row
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
.row > [class*='col-']
display: flex;
flex-direction: column;
Actualización 2020
Mejor enfoque para Bootstap 3.x — usando CSS caja flexible (y requiere un mínimo de CSS)..
.equal
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
Ejemplo de flexbox de la misma altura de Bootstrap
Para aplicar solo el mismo flexbox de altura en puntos de interrupción específicos (sensible), use una consulta de medios. Por ejemplo, aquí está sm(768px) y más:
@media (min-width: 768px)
.row.equal
display: flex;
flex-wrap: wrap;
Esta solución también funciona bien para filas múltiples (envoltura de columna):
https://www.bootply.com/gCEXzPMehZ
Otras soluciones
Estas opciones serán recomendadas por otros, pero no son una buena idea para el diseño receptivo. Estos solo funcionan para diseños simples de una sola fila sin ajuste de columna.
1) Usando enormes márgenes negativos y relleno
2) Usando pantalla: tabla-celda (esta solución también afecta la cuadrícula receptiva, por lo que se puede usar una consulta @media para aplicar solo table mostrar en pantallas más anchas antes de que las columnas se apilen verticalmente)
Arranque 4
Flexbox ahora se usa de forma predeterminada en Bootstrap 4, por lo que no es necesario el CSS adicional para crear columnas de igual altura: http://www.codeply.com/go/IJYRI4LPwU
Ejemplo:
No se necesita JavaScript. Solo agrega la clase .row-eq-height a su existente .row como esto:
some content
kittenz
some more content
Sugerencia: si tiene más de 12 columnas en su fila, la cuadrícula de arranque no podrá envolverla. Así que agrega un nuevo div.row.row-eq-height cada 12 columnas.
Sugerencia: es posible que deba agregar
a tu html
Si haces scroll puedes encontrar las acotaciones de otros creadores, tú igualmente tienes la opción de dejar el tuyo si lo crees conveniente.