css - filas - medidas bootstrap 4

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

Question

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 tuvieran la misma altura que la columna amarilla.

Aquí está el código:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

Answer 1

Actualización 2018

El mejor enfoque para Bootstap 3.x : usar flexbox de CSS (y requiere CSS mínimo).

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

Bootstrap ejemplo de flexbox de la misma altura

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 arriba:

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

Esta solución también funciona bien para varias filas (ajuste de columna):
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 ajuste de columnas.

1) Usando grandes márgenes negativos y relleno

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

Bootstrap 4

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

Answer 2

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 acumulan, por lo tanto, puede implementar sus respuestas con una parte adicional. Para cada uno, puede usar el nombre de CSS que se proporciona aquí, además de la clase de fila que usa, por lo que el div debería tener este aspecto si siempre desea que los divs estén uno al lado del otro:

<div class="row row-eq-height-xs">Your Content Here</div>

Para todas las pantallas:

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

Para cuando quieras 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 quieras 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, existe una solución más simple, pero debe asegurarse de proporcionar la información de la columna desde el ancho deseado más grande para todos los tamaños hasta xs (por ejemplo, <div class="col-md-3 col-sm-4 col-xs-12"> :

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

Answer 3

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 agregó las clases a los padres que eran requeridas.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Estoy utilizando puntos de interrupción de respuesta porque el flujo normalmente dificulta la naturaleza de respuesta estándar de bootstrap.

Answer 4

Aquí está mi solución (CSS compilado):

.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 tu código se vería así:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

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

Con .row-sm-eq columnas se .row-sm-eq en pantallas XS. Si no necesita que se .row-xs-eq en ninguna pantalla, puede usar .row-xs-eq .

La versión de SASS que realmente utilizamos:

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

Answer 5

Hay un problema con el uso de la Solución 1 al aplicarla solo en la columna en filas. Quisiera mejorar la Solución 1.

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

(Lo siento, no puedo comentar la respuesta de Popnoodles. No tengo suficiente reputación)

Answer 6

Mejor por ahi

Reflejo de Github - Docs

Funciona con bootstrap

Actualizar:

1. Incluir el CSS
2. Actualice su 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 G.C.S.E.
 * email: [email protected]
 * 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;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

Answer 7

No se necesita JavaScript. Simplemente agregue la clase .row-eq-height a su .row existente de esta manera:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Sugerencia: si tiene más de 12 columnas en su fila, la cuadrícula bootstrap no se ajustará. Así que agregue un nuevo div.row.row-eq-height cada 12 columnas.

Sugerencia: es posible que necesite agregar

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

a tu html

Answer 8

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

.align-box {
    min-height: 400px;
}

Answer 9

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:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

Para admitir incluso más versiones de IE, puede, por ejemplo, usar https://github.com/liabru/jquery-match-height y apuntar 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 relleno de polietileno, las columnas se comportarán como las columnas habituales de Bootstrap, por lo que es una buena alternativa.

Answer 10

Sé que llego muy tarde, pero ahora puede usar el atributo de estilo "min-height" para lograr su propósito.

Answer 11

Si cualquier persona que use bootstrap 4 y busque columnas de igual altura, simplemente use row-eq-height para div primaria

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row row-eq-height">
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
          </div>

Ref: getbootstrap.com.vn/examples/equal-height-columns

Answer 12

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

Answer 13

Solo muestra una fila por lo que su caso de uso puede estar limitado a eso. En caso de que tenga varias filas, este complemento - github Javascript-grids - funciona perfectamente! Hace que cada panel se expanda al panel más alto, lo que le da a cada fila una altura diferente en función del panel más alto de esa fila. Es una solución jquery vs. css, pero quería recomendarla como un enfoque alternativo.

Answer 14

Solución descarada si alguien está interesado. Solo asegúrate de que todos tus cols (el) tengan un nombre de clase común ... también funciona responsivamente si lo vinculas a $ (window) .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 ha sido editada según el comentario de @Chris que indica que el código solo estableció la última altura más alta en la función $.each()

Answer 15

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

Para mi proyecto, quería que cada fila cuyos elementos hijos tuvieran bordes tenga la misma altura para que los bordes se vean irregulares. Para esto he creado una simple clase css.

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

Answer 16

HTML

<div class="container-fluid">
<div class="row-fluid">
<div class="span4 option2">
<p>left column </p>
<p>The first column has to be the longest The first column has to be the longes</p>
</div>

<div class="span4 option2">
<p>middle column</p>
</div>

<div class="span4 option2">
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
</div>
</div>
</div>

CSS

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

JS

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

Answer 17

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

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

Para agregar compatibilidad con el contenido de miniaturas flex en columnas flexibles como la captura de pantalla anterior, 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 más abajo, puede usar la demostración con un repliegue usando etiquetas condicionales con algo como javascript grids como un polyfill:

<!--[if lte IE 9]>

<![endif]-->

En cuanto a los otros dos ejemplos en la respuesta aceptada ... La demostración de la tabla es una idea decente pero se está implementando mal. La aplicación de ese CSS en las clases de columna bootstrap específicamente, sin duda, romperá el marco de la cuadrícula por completo. Debe usar un selector personalizado para uno y dos. Los estilos de tablas no deben aplicarse a [class*=''col-''] que tienen anchos definidos. Este método SOLO debe usarse si desea columnas de igual altura y anchura igual. No está diseñado para ningún otro diseño y NO responde. Podemos hacerlo sin embargo en pantallas móviles ...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>

@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 de la respuesta aceptada que implementa una versión del único diseño verdadero es una buena opción para algunas situaciones, pero no es adecuada para las columnas bootstrap. La razón de esto es que todas las columnas se expanden a la altura del contenedor. Así que esto también romperá la capacidad de respuesta, ya que las columnas no se expanden a los elementos que se encuentran a su lado, sino a todo el contenedor. Este método tampoco le permitirá aplicar los márgenes inferiores a las filas y también causará otros problemas en el camino, como el desplazamiento a las etiquetas de anclaje.

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

Answer 18

Solución 1 usando márgenes negativos (no rompe la capacidad de respuesta)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solución 2 usando tabla

Demo

.row {
    display: table;
}

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

La solución 3 usa flex agregado en agosto de 2015. Los comentarios publicados antes de esto no se aplican a esta solución.

Demo

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

Answer 19

Intenta hacer esto a través de flex-box

.container {
 display: flex;
 padding-bottom: 50px;
}
.col {
 background: blue;
 padding: 30px;
}

.col.center {
 background: red;
 height: 100px;
 margin-bottom: -50px;
}

<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

Answer 20

Me sorprende que no pude encontrar una solución que valiera la pena aquí a fines de 2018. Seguí adelante y descubrí una solución Bootstrap 3 utilizando Flexbox.

Ejemplo limpio y simple:

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

Ver demostración de trabajo: http://jsfiddle.net/xho1y5tb/

Answer 21

Puedes envolver las columnas dentro de un div

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>

Answer 22

Puedes usar el siguiente código

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

Answer 23

Si tiene sentido en su contexto, simplemente puede agregar una división de 12 columnas vacía después de cada descanso, que actúa como un divisor que abraza el fondo de la celda más alta de su fila.

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

¡Espero que esto ayude!

Answer 24

Solo revisando la documentación de bootstrap y encontré la solución simple para el problema de la columna de la misma altura.

Agregue el clearfix adicional solo para la ventana gráfica requerida

<div class="clearfix visible-xs-block"></div>

Por ejemplo:

<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>

Por favor, consulte http://getbootstrap.com/css/#grid-responsive-resets

Answer 25

.row.container-height {
 overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

donde .container-height es la clase de estilo que se debe agregar a un elemento con estilo .row a la que todos sus hijos .col * tienen la misma altura.

La aplicación de estos estilos solo a algunos .row específicos (con .container-height, como en el ejemplo) también evita aplicar el margen y el desbordamiento de relleno a todos los .col *.

Answer 26

Busqué una solución para el mismo problema, ¡y encontré que una acaba de funcionar! - Con casi ningún código extra ..

vea https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 para una buena descripción, y con la respuesta que desea en la parte inferior, con un enlace.

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

esta fue la forma correcta de respuesta para mí ... una cita: ... 3 - Use flexbox (¡lo mejor!)

A partir de 2017, la mejor (y más fácil) manera de hacer columnas de igual altura en un diseño responsivo es usar flexbox de CSS3.

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

y simplemente use:

div class="container">
   <div class="row display-flex .... etc..

Answer 27

Pensé que solo agregaría que la respuesta dada por Dr.Flink también se puede aplicar a un form-horizontalbloque Bootstrap 3 , lo que puede ser muy útil si desea usar colores de fondo para cada celda. Para que esto funcione con los formularios de arranque, necesitaría envolver el contenido del formulario que solo sirve para replicar una estructura similar a una tabla.

El ejemplo a continuación también proporciona el CSS que demuestra que una consulta de medios adicional permite a Bootstrap 3 simplemente tomar posesión y hacer lo normal en las pantallas más pequeñas. Esto también funciona en IE8 +.

Ejemplo:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>

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

Answer 28

Utilizo esta solución súper fácil clearfix, que no tiene ningún efecto secundario.

Aquí hay un ejemplo en AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

Y un ejemplo más en PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

Answer 29

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

Desde:

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

Answer 30

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^=''col-''] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

Ejemplo:

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

Adaptado de varias respuestas aquí. Las respuestas basadas en flexbox son 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 estará en 2016. IE8 y 9 todavía forman parte de 4- 6% de uso dependiendo de cómo mida, y para muchos usuarios corporativos es mucho peor. caniuse.com/#feat=flexbox

El display: table, display: table-celltruco es compatible con versiones más - y uno bueno es el único problema grave compatibilidad es un tema Safari donde se obliga box-sizing: border-box, algo que ya se aplica a las etiquetas de Bootstrap. http://caniuse.com/#feat=css-table

Obviamente puedes agregar más clases que hagan cosas similares, como .equal-height-md. Los até a divs para el pequeño beneficio de rendimiento en mi uso restringido, pero podría eliminar la etiqueta para hacerla más generalizada como el resto de Bootstrap.

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