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

Three bootstrap columns with the center column longer than the other two columns

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>


777
2017-10-30 23:31


origen


Respuestas:


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

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

884
2017-10-30 23:38



Actualización 2018

El mejor enfoque para Bootstap 3.x - usando 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 más:

@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) Usando enormes márgenes negativos y relleno

2) Usando display: table-cell (Esta solución también afecta a la cuadrícula de respuesta, por lo que una consulta de @media se puede usar para aplicar solo table mostrar en pantallas más anchas 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


216
2018-04-06 10:25



No se necesita JavaScript Solo agrega la clase .row-eq-height a su existente .row solo así:

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

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

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

a tu html


78
2018-04-29 10:40



Para responder a tu pregunta, esto es todo lo que necesitas ver la demostración sensible 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;
    }
}

Screenshot of 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 inferiores, puede usar la demostración con una alternativa utilizando etiquetas condicionales con algo como Rejillas de JavaScript como un polyfill:

<!--[if lte IE 9]>

<![endif]-->

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

<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 en la respuesta aceptada que implementa una versión del un verdadero diseño es una buena opción para algunas situaciones, pero no es adecuada para columnas bootstrap. 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 etiquetas.

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


46
2017-12-20 12:48



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


38
2017-11-19 17:47



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

24
2018-02-26 21:03



.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


8
2017-11-10 18:21



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

7
2018-05-12 19:26



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 el $.each() función


7
2017-08-25 06:15