¿Cómo puedo hacer que las columnas de Bootstrap tengan la misma altura?

Estoy usando Bootstrap. ¿Cómo puedo hacer tres columnas de la misma altura?

Aquí hay una captura de pantalla del problema. Me gustaría que las columnas azul y roja tengan la misma altura que la columna amarilla.

Tres columnas de arranque con la columna central más larga que las otras dos columnas

Aquí está el código:

 
some content
catz
some more content

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

Manifestación

 .row { display: table; } [class*="col-"] { float: none; display: table-cell; vertical-align: top; } 

La solución 3 con Flex agregó agosto de 2015. Los comentarios publicados antes de esta fecha 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 2018

El mejor enfoque para Bootstap 3.x – utilizando CSS flexbox (y requiere CSS mínimo) ..

 .equal { display: flex; display: -webkit-flex; flex-wrap: wrap; } 

Bootstrap mismo ejemplo de Flexbox de altura

Para aplicar solo la misma flexbox de altura en puntos de corte específicos (receptivo), use una consulta de medios. Por ejemplo, aquí está sm (768px) y arriba:

 @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } 

Esta solución también funciona bien para múltiples filas (ajuste de columnas):
https://www.bootply.com/gCEXzPMehZ

Otras soluciones

Estas opciones serán recomendadas por otros, pero no son una buena idea para un diseño receptivo. Estos solo funcionan para diseños simples de una sola fila sin envoltura de columnas.

1) Uso de grandes márgenes negativos y relleno

2) Usando display: table-cell (esta solución también efectúa la cuadrícula de respuesta, por lo que una consulta @media se puede usar para aplicar solo la visualización de table en pantallas más amplias antes de que las columnas se acumulen verticalmente)


Bootstrap 4

Flexbox ahora se usa de manera predeterminada en Bootstrap 4, por lo que no es necesario que el CSS adicional genere columnas de igual altura: http://www.codeply.com/go/IJYRI4LPwU

No se necesita JavaScript Solo agrega la clase .row-eq-height a tu .row actual de la .row manera:

 
some content
kittenz
some more content

Consejo: si tiene más de 12 columnas en su fila, la cuadrícula de arranque no podrá envolverlo. Así que agrega un nuevo div.row.row-eq-height cada 12 columnas.

Sugerencia: es posible que deba agregar

  

a tu html

Para responder a su pregunta, esto es todo lo que necesita para ver la demostración con respuesta completa con css con prefijo :

 /* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/ @media only screen and (min-width : 481px) { .flex-row { display: flex; flex-wrap: wrap; } .flex-row > [class*='col-'] { display: flex; flex-direction: column; } .flex-row.row:after, .flex-row.row:before { display: flex; } } 

Captura de pantalla de Codepen

Para agregar compatibilidad con el contenido en miniatura, flexión dentro de columnas flexibles, como la captura de pantalla anterior, también agregue esto … Tenga en cuenta que también puede hacer esto con paneles:

 .flex-row .thumbnail, .flex-row .caption { display: flex; flex: 1 0 auto; flex-direction: column; } .flex-text { flex-grow: 1; } .flex-row img { width: 100%; } 

Si bien Flexbox no funciona en IE9 y versiones posteriores, puede usar la demostración con una alternativa utilizando tags condicionales con algo como javascript grids como polyfill:

  

En cuanto a los otros dos ejemplos en la respuesta aceptada … La demostración de mesa es una idea decente pero se está implementando mal. La aplicación de CSS específicamente en las clases de columna bootstrap específicamente romperá por completo el framework grid. Debería utilizar un selector personalizado para uno y dos; los estilos de las tablas no deberían aplicarse a [class*='col-'] que tienen anchos definidos. Este método SÓLO debe usarse si desea columnas de igual altura Y ancho igual. No está diseñado para ningún otro diseño y NO responde. Sin embargo, podemos hacerlo retroceder en las pantallas móviles …

 
Content...
Content...
 @media only screen and (min-width : 480px){ .table-row-equal { display: table; width: 100%; table-layout: fixed; border-spacing: 30px 0px; word-wrap: break-word; } .table-row-equal .thumbnail { float: none; display: table-cell; vertical-align: top; width: 1%; } } 

Por último, la primera demostración en la respuesta aceptada que implementa una versión del diseño único verdadero es una buena opción para algunas situaciones, pero no es adecuada para columnas de arranque. La razón para esto es que todas las columnas se expanden a la altura del contenedor. Por lo tanto, esto también interrumpirá la capacidad de respuesta ya que las columnas no se expanden a los elementos que están junto a ellos, sino a todo el contenedor. Este método tampoco le permitirá aplicar los márgenes inferiores a las filas por más tiempo y también causará otros problemas en el camino, como desplazarse para anclar las tags.

Para ver el código completo, vea el Codepen que automáticamente prefija el código de flexbox.

Solo muestra una fila, por lo que su caso de uso puede estar limitado a eso. ¡Por si acaso tienes varias filas, este plugin – github Javascript-grids – funciona a la perfección! Hace que cada panel se expanda al panel más alto, dando a cada fila una altura potencialmente diferente según el panel más alto de esa fila. Es una solución jquery vs. css, pero quería recomendarlo como un enfoque alternativo.

Si desea que esto funcione en cualquier navegador, use javascript:

 $( document ).ready(function() { var heights = $(".panel").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".panel").height(maxHeight); }); 
 .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } 

De:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

También puede usar inline-flex, que funciona bastante bien y puede ser un poco más limpio que modificar cada elemento de fila con CSS.

Para mi proyecto, quería que cada fila cuyos elementos secundarios tuvieran bordes fueran de la misma altura para que los bordes se vean irregulares. Para esto creé una clase simple de CSS.

 .row.borders{ display: inline-flex; width: 100%; } 

solución jquery descarada si alguien está interesado. Solo asegúrese de que todos sus cols (el) tengan un nombre de clase común … también funciona de manera responsable si lo vincula a $ (ventana) .resize

 function equal_cols(el) { var h = 0; $(el).each(function(){ $(this).css({'height':'auto'}); if($(this).outerHeight() > h) { h = $(this).outerHeight(); } }); $(el).each(function(){ $(this).css({'height':h}); }); } 

Uso

 $(document).ready(function(){ equal_cols('.selector'); }); 

Nota: Esta publicación se ha editado según el comentario de @Chris de que el código solo se configuró con la última altura más alta en la función $.each()

Algunas de las respuestas anteriores explican cómo hacer que los divs tengan la misma altura, pero el problema es que cuando el ancho es demasiado estrecho los divs no se astackn, por lo tanto, puede implementar sus respuestas con una parte adicional. Para cada uno, puede usar el nombre CSS que se proporciona aquí además de la clase de fila que utiliza, por lo que el div debería verse así si siempre quiere que los divs estén uno al lado del otro:

 
Your Content Here

Para todas las pantallas:

 .row-eq-height-xs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; } 

Para cuando quieres usar sm:

 .row-eq-height-sm { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } @media (min-width:768px) { .row-eq-height-sm { flex-direction: row; } } 

Para cuando quieras md:

 .row-eq-height-md { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } @media (min-width:992px) { .row-eq-height-md { flex-direction: row; } } 

Para cuando quieres usar lg:

 .row-eq-height-lg { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } @media (min-width:1200px) { .row-eq-height-md { flex-direction: row; } } 

EDITAR Basado en un comentario, de hecho hay una solución más simple, pero debe asegurarse de dar la información de la columna del mayor ancho deseado para todos los tamaños hasta xs (por ejemplo,

:

 .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; } 

Sé que llegué muy tarde, pero ahora puedes usar el atributo de estilo “min-height” para lograr tu propósito.

Probé muchas de las sugerencias hechas en este hilo y en otras páginas, pero ninguna solución funcionó al 100% en todos los navegadores.

Así que experimenté bastante tiempo y se me ocurrió esto. Una solución completa para las columnas Bootstrap Equal Height con la ayuda de flexbox con solo 1 clase. Esto funciona en todos los principales navegadores IE10 +.

CSS:

 .row.equal-cols { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row.equal-cols:before, .row.equal-cols:after { display: block; } .row.equal-cols > [class*='col-'] { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .row.equal-cols > [class*='col-'] > * { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } 

HTML:

 

Para admitir incluso más versiones de IE, puede, por ejemplo, usar https://github.com/liabru/jquery-match-height y dirigirse a todas las columnas secundarias de .equal-cols . Me gusta esto:

 // Create a check for IE9 (or any other specific browser). if(IE9) { $(".row.equal-cols > [class*='col-']").matchHeight(); } 

Sin este polyfill, las columnas se comportarán como las columnas de Bootstrap habituales, por lo que es una buena alternativa.

aquí está mi solución (CSS comstackdo):

 .row.row-xs-eq { display: table; table-layout: fixed; margin: 0; } .row.row-xs-eq::before { content: none; } .row.row-xs-eq::after { content: none; } .row.row-xs-eq > [class^='col-'] { display: table-cell; float: none; padding: 0; } @media (min-width: 768px) { .row.row-sm-eq { display: table; table-layout: fixed; margin: 0; } .row.row-sm-eq::before { content: none; } .row.row-sm-eq::after { content: none; } .row.row-sm-eq > [class^='col-'] { display: table-cell; float: none; padding: 0; } } @media (min-width: 992px) { .row.row-md-eq { display: table; table-layout: fixed; margin: 0; } .row.row-md-eq::before { content: none; } .row.row-md-eq::after { content: none; } .row.row-md-eq > [class^='col-'] { display: table-cell; float: none; padding: 0; } } @media (min-width: 1200px) { .row.row-lg-eq { display: table; table-layout: fixed; margin: 0; } .row.row-lg-eq::before { content: none; } .row.row-lg-eq::after { content: none; } .row.row-lg-eq > [class^='col-'] { display: table-cell; float: none; padding: 0; } } 

Entonces su código se vería así:

 

Básicamente, este es el mismo sistema que usa con las clases .col-* con la diferencia que necesita para aplicar las clases .row-* a la fila misma.

Con las .row-sm-eq en las pantallas XS. Si no necesita astackrlos en ninguna pantalla, puede usar .row-xs-eq .

La versión de SASS que realmente usamos:

 .row { @mixin row-eq-height { display: table; table-layout: fixed; margin: 0; &::before { content: none; } &::after { content: none; } > [class^='col-'] { display: table-cell; float: none; padding: 0; } } &.row-xs-eq { @include row-eq-height; } @media (min-width: $screen-sm-min) { &.row-sm-eq { @include row-eq-height; } } @media (min-width: $screen-md-min) { &.row-md-eq { @include row-eq-height; } } @media (min-width: $screen-lg-min) { &.row-lg-eq { @include row-eq-height; } } } 

Demo en vivo


Nota: mezclar .col-xs-12 y .col-xs-6 dentro de una sola fila no funcionaría correctamente.

Hay un problema con el uso de la Solución 1 mientras la aplica solo en la columna en filas. Me gustaría mejorar la Solución 1.

  [class^="col-"]:not([class*="-12"]){ margin-bottom: -99999px; padding-bottom: 99999px; } 

(Disculpe, no puedo comentar el comentario de Popnoodles. No tengo suficientes reputaciones)

Mejor por ahí:

Reflejo Github – Documentos

Funciona con bootstrap

Actualizar:

  1. Incluir el CSS
  2. Actualiza tu código:
 /*! * * Reflex v1.0 * * Reflex is a flexbox grid which provides a way to take advantage of emerging * flexbox support while providing a fall back to inline-block on older browsers * * Built by Lee Jordan GCSE * email: ldjordan@gmail.com * github: https://github.com/leejordan * * Structure and calculations are inspired by twitter bootstrap * */ .reflex-order-12 { -webkit-order: 12; -ms-flex-order: 12; order: 12; } .reflex-order-11 { -webkit-order: 11; -ms-flex-order: 11; order: 11; } .reflex-order-10 { -webkit-order: 10; -ms-flex-order: 10; order: 10; } .reflex-order-9 { -webkit-order: 9; -ms-flex-order: 9; order: 9; } .reflex-order-8 { -webkit-order: 8; -ms-flex-order: 8; order: 8; } .reflex-order-7 { -webkit-order: 7; -ms-flex-order: 7; order: 7; } .reflex-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .reflex-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .reflex-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .reflex-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .reflex-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .reflex-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .reflex-order-0 { -webkit-order: 0; -ms-flex-order: 0; order: 0; } .reflex-container { display: inline-block; display: -webkit-flex; display: flex; zoom: 1; *display: inline; margin: 0; padding: 0; position: relative; width: 100%; letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; list-style-type: none; } .reflex-container *, .reflex-container:before, .reflex-container:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; letter-spacing: normal; word-spacing: normal; white-space: normal; } .reflex-container *:before, .reflex-container *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class*="reflex-col-"] { width: 100%; vertical-align: top; position: relative; display: inline-block; display: -webkit-flex; display: flex; zoom: 1; *display: inline; text-align: left; text-align: start; } .reflex-item { display: block; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; flex: 1 1 auto; } _:-ms-fullscreen, :root .reflex-item { width: 100%; } .reflex-col-12 { width: 100%; *width: 99.9%; } .reflex-col-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-9 { width: 75%; *width: 74.9%; } .reflex-col-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-6 { width: 50%; *width: 49.9%; } .reflex-col-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-3 { width: 25%; *width: 24.9%; } .reflex-col-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } @media (min-width: 480px) { .reflex-col-xs-12 { width: 100%; *width: 99.9%; } .reflex-col-xs-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-xs-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-xs-9 { width: 75%; *width: 74.9%; } .reflex-col-xs-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-xs-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-xs-6 { width: 50%; *width: 49.9%; } .reflex-col-xs-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-xs-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-xs-3 { width: 25%; *width: 24.9%; } .reflex-col-xs-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-xs-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } @media (min-width: 768px) { .reflex-col-sm-12 { width: 100%; *width: 99.9%; } .reflex-col-sm-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-sm-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-sm-9 { width: 75%; *width: 74.9%; } .reflex-col-sm-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-sm-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-sm-6 { width: 50%; *width: 49.9%; } .reflex-col-sm-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-sm-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-sm-3 { width: 25%; *width: 24.9%; } .reflex-col-sm-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-sm-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } @media (min-width: 992px) { .reflex-col-md-12 { width: 100%; *width: 99.9%; } .reflex-col-md-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-md-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-md-9 { width: 75%; *width: 74.9%; } .reflex-col-md-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-md-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-md-6 { width: 50%; *width: 49.9%; } .reflex-col-md-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-md-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-md-3 { width: 25%; *width: 24.9%; } .reflex-col-md-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-md-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } @media (min-width: 1200px) { .reflex-col-lg-12 { width: 100%; *width: 99.9%; } .reflex-col-lg-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-lg-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-lg-9 { width: 75%; *width: 74.9%; } .reflex-col-lg-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-lg-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-lg-6 { width: 50%; *width: 49.9%; } .reflex-col-lg-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-lg-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-lg-3 { width: 25%; *width: 24.9%; } .reflex-col-lg-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-lg-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } .reflex-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .reflex-wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .reflex-direction-row-reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .reflex-direction-column { -webkit-flex-direction: column; flex-direction: column; } .reflex-direction-column-reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .reflex-align-start { -webkit-align-items: flex-start; align-items: flex-start; } .reflex-align-end { -webkit-align-items: flex-end; align-items: flex-end; } .reflex-align-end [class*="reflex-col-"] { vertical-align: bottom; } .reflex-align-center { -webkit-align-items: center; align-items: center; } .reflex-align-center [class*="reflex-col-"] { vertical-align: middle; } .reflex-align-baseline { -webkit-align-items: baseline; align-items: baseline; } .reflex-align-baseline [class*="reflex-col-"] { vertical-align: baseline; } .reflex-align-content-start { -webkit-align-content: flex-start; align-content: flex-start; } .reflex-align-content-end { -webkit-align-content: flex-end; align-content: flex-end; } .reflex-align-content-end [class*="reflex-col-"] { vertical-align: bottom; } .reflex-align-content-center { -webkit-align-content: center; align-content: center; } .reflex-align-content-space-between { -webkit-align-content: space-between; align-content: space-between; } .reflex-align-content-space-around { -webkit-align-content: space-around; align-content: space-around; } .reflex-align-self-stretch { -webkit-align-self: stretch; align-self: stretch; } .reflex-align-self-start { -webkit-align-self: flex-start; align-self: flex-start; } .reflex-align-self-end { -webkit-align-self: flex-end; align-self: flex-end; vertical-align: bottom; } .reflex-align-self-center { -webkit-align-self: center; align-self: center; vertical-align: middle; } .reflex-align-self-baseline { -webkit-align-self: baseline; align-self: baseline; vertical-align: baseline; } .reflex-justify-start { text-align: left; -webkit-justify-content: flex-start; justify-content: flex-start; } .reflex-justify-end { text-align: right; -webkit-justify-content: flex-end; justify-content: flex-end; } .reflex-justify-center { text-align: center; -webkit-justify-content: center; justify-content: center; } .reflex-justify-space-between { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -webkit-justify-content: space-between; justify-content: space-between; } .reflex-justify-space-around { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -webkit-justify-content: space-around; justify-content: space-around; } .reflex-item-margin-sm { margin: 0 0.25em 0.5em; } .reflex-item-margin-md { margin: 0 0.5em 1em; } .reflex-item-margin-lg { margin: 0 1em 2em; } .reflex-item-content-margin-sm * { margin-right: 0.25em; margin-left: 0.25em; } .reflex-item-content-margin-md * { margin-right: 0.5em; margin-left: 0.25em; } .reflex-item-content-margin-lg * { margin-right: 1em; margin-left: 1em; } .reflex-img { display: inline-block; display: -webkit-flex; display: flex; zoom: 1; *display: inline; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; height: auto; } .reflex-item-footer { margin-top: auto; margin-left: 0; margin-right: 0; } 
    
some content
kittenz
some more content

Aquí está mi método, he usado flex con algunos cambios en la consulta de medios.

  @media (min-width: 0px) and (max-width: 767px) { .fsi-row-xs-level { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media (min-width: 768px) and (max-width: 991px) { .fsi-row-sm-level { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media (min-width: 992px) and (max-width: 1199px) { .fsi-row-md-level { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media (min-width: 1200px) { .fsi-row-lg-level { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } 

luego agregué las clases al padre que se requerían.

 
column 1
column 2
column 3

Estoy usando puntos de interrupción receptivos porque el flujo usualmente dificulta la naturaleza de respuesta estándar de arranque.

Para aquellos que buscan una solución rápida y fácil: si tiene un conjunto relativamente consistente de configuración de contenido de bloques, una altura mínima en el div que es un poco más grande que el bloque más grande puede ser más fácil de implementar.

 .align-box { min-height: 400px; } 
 .row.container-height { overflow: hidden; } .row.container-height > [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; } 

Si alguien usa bootstrap 4 y busca columnas de igual altura solo use row-eq-height para parent div

   
.row.row-eq-height > .col-xs-4
.row.row-eq-height > .col-xs-4
this is
a much
taller
column
than the others
.row.row-eq-height > .col-xs-4
 @media (min-width: @screen-sm-min) { div.equal-height-sm { display: table; > div[class^='col-'] { display: table-cell; float: none; vertical-align: top; } } } 
Test
Test
Test
Test

Ejemplo:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Adaptado de varias respuestas aquí. Las respuestas basadas en FlexBox son las correctas una vez que IE8 y 9 están muertos, y una vez que Android 2.x está muerto, pero eso no es cierto en 2015, y probablemente no lo será en 2016. IE8 y 9 todavía conforman 4- 6% de uso dependiendo de cómo se mida, y para muchos usuarios corporativos es mucho peor. http://caniuse.com/#feat=flexbox

La display: table , display: table-cell truco de display: table-cell es más compatible con versiones anteriores, y una gran cosa es que el único problema serio de compatibilidad es un problema de Safari donde obliga box-sizing: border-box , algo que ya se aplica a tus tags de Bootstrap. http://caniuse.com/#feat=css-table

Obviamente puedes agregar más clases que hagan cosas similares, como .equal-height-md . Ataron estos a los divs para el pequeño beneficio de rendimiento en mi uso restringido, pero podrías quitar la etiqueta para hacerlo más generalizado como el rest de Bootstrap.

Tenga en cuenta que jsfiddle aquí usa CSS, por lo que las cosas que Less proporcionaría están codificadas en el ejemplo vinculado. Por ejemplo, @ screen-sm-min ha sido reemplazado por lo que Less podría insertar: 768px.

Si tiene sentido en su contexto, puede simplemente agregar un div 12-column vacío después de cada descanso, que actúa como un divisor que abraza la parte inferior de la celda más alta en su fila.

 
Some content
Lots of content! Lots of content! Lots of content! Lots of content! Lots of content!
More content...

I use this super easy solution with clearfix , which doesn’t have any side effects.

Here is an example on AngularJS:

 

And one more example on PHP:

 < ?php foreach ($list as $i => $item): ?> 
< ?php if ($i % 2 === 1): ?>
< ?php endif; ?> < ?php endforeach; ?>

Thought I’d just add that the answer given by Dr.Flink can also be applied to a Bootstrap 3 form-horizontal block – which can be very handy if you want to use background colours for each cell. In order for this to work for bootstrap forms, you would need to wrap the form contents which just serves to replicate a table-like structure.

The example below also provides the CSS which demonstrates an additional media query allows Bootstrap 3 to simply takeover and do it’s normal thing on the smaller screen(s). This also works in IE8+ .

Ejemplo:

 
Some content
 .form-wrapper { display: table; } .form-wrapper .form-group { display: table-row; } .form-wrapper .form-group .control-label { display: table-cell; float: none; } .form-wrapper .form-group label + div { display: table-cell; float: none; } @media (max-width: 768px) { .form-wrapper { display: inherit; } .form-wrapper .form-group { display: block; } .form-wrapper .form-group .control-label { display: inherit; } .form-wrapper .form-group label + div { display: inherit; } } 

You can wrap the columns inside a div

 
some content
kittenz
some more content

Try this do through flex-box

 .container { display: flex; padding-bottom: 50px; } .col { background: blue; padding: 30px; } .col.center { background: red; height: 100px; margin-bottom: -50px; } 
 
Left
Center
Right

HTML

 

left column

The first column has to be the longest The first column has to be the longes

middle column

right column

right column

right column

right column

right column

CSS

 .option2 { background: red; border: black 1px solid; color: white; } 

JS

 $('.option2').css({ 'height': $('.option2').height() }); 

I searched for a solution to the same problem, and found one just worked !! – with almost no extra code..

see https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 for a good disuccuion, and with the resposne you want in the bottom, with a link.

https://www.codeply.com/go/EskIjvun4B

this was the correct responsive way to for me… a quote: … 3 — Use flexbox (best!)

As of 2017, the best (and easiest) way to make equal height columns in a responsive design is using CSS3 flexbox.

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

and simply use:

 div class="container"> 

Just checking through bootstrap documentation and I found the simple solution for the problem of column same height.

Add the extra clearfix for only the required viewport

 

Por ejemplo:

 
This is a long text
This is short
This is a long text
Short
Long Text
Longer text which will push down
Short

Please refer to http://getbootstrap.com/css/#grid-responsive-resets

You can use below code

 var heights = $(".row > div").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".row > div").height(maxHeight); 

alot of css here…

jQuery

 $(document).ready(function() { // Get height of original column you want to match var box-height = $('.panel:nth-child(1)').outerHeight(); // Output same height on particular element or element(s) $('.panel').height(box-height); }); 

Really simple code no need to play with css, although all options above are perfectly usable.

Jsfiddle