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

965

Estoy usando Bootstrap. ¿Cómo puedo hacer que tres columnas tengan 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:

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

Ricardo
fuente
11
Hay un artículo en el sitio web de bootstrap con una solución de 5 líneas getbootstrap.com.vn/examples/equal-height-columns
Eduard Gamonal
2
El ejemplo en Bootstrap rompe la capacidad de respuesta de Eduard. .rowFalta el flex flex-wrap: wrap;. Aquí hay un ejemplo de cómo
Bryan Willis
Posible solución: una imagen transparente de 1 píxel de ancho en las otras columnas. Esta nueva imagen de un ancho de píxel coincide con la altura de píxel de la imagen de los gatos en el ejemplo anterior. (Puede no funcionar o ser práctico en su situación)
Sql Surfer
En Bootstrap 4, podemos usar la tarjeta para lo mismo
Amjad Rehman A

Respuestas:

1045

Solución 4 usando Bootstrap 4

Bootstrap 4 usa Flexbox, por lo que no hay necesidad de CSS adicional.

Manifestación

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

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 agregó 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;
}
Fideos
fuente
77
Piense en ello como la columna que está siendo absorbida por el espacio negativo. Si elimina el desbordamiento, verá lo que está sucediendo.
Popnoodles
99
Si se dirige específicamente a la clase de columna bootstrap, probablemente debería usar un ancla ^ en lugar de un comodín *. El uso de ^ dirá que la clase debe comenzar con col- como el comodín que se muestra coincidirá con cualquier clase con col- en cualquier lugar de la cadena, posiblemente con efectos no deseados en los estilos en los que puede haber utilizado la convención col-. (es decir, stuff-col-morestuff).
Logan G.
77
Buena respuesta, con algunas advertencias. La solución 1 deshabilita el flotador y, por lo tanto, rompe el comportamiento receptivo de la cuadrícula de arranque. La solución 2 (explicada con mayor profundidad en positioniseverything.net/articles/onetruelayout/equalheight ) no muestra el borde inferior (ya que está recortada en algún lugar del espacio de relleno).
Ohad Schneider
14
La solución 3 rompe la capacidad de respuesta de la fila.
SPRBRN
10
@Popnoodles debe agregar flex-wrap: wrap;al tercer ejemplo para habilitar la capacidad de respuesta. También querrá agregar display: flex; dirección flexible: columna; a la clase de columna. Si va a utilizar .row y no una clase personalizada, deberá proporcionar un respaldo para los navegadores más antiguos que cambien la flexión de la pantalla. Aquí hay un ejemplo
Bryan Willis el
321

Actualización 2020

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

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

Ejemplo de Bootstrap misma altura flexbox

Para aplicar solo la misma altura de flexbox en puntos de interrupción específicos (receptivos), 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 envoltura de columna.

1) Usando enormes márgenes negativos y relleno

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


Bootstrap 4

Flexbox ahora se usa de manera 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

Ejemplo:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>
Zim
fuente
55
Puede usar una consulta de medios para aplicar solo el flexbox en dispositivos más grandes / anchos. Actualicé el bootply: bootply.com/Cn6fA6LuTq
Zim
En caso de que alguien esté interesado, he creado un bolígrafo para demostrar efectos similares en un formulario usando flexbox.
Justin Lau
2
Es un error conocido de Safari con flexbox: prueba: bugs.webkit.org/show_bug.cgi?id=137730
Zim
55
@Stanley el comentario sobre "ya no responde" es antiguo e irrelevante.
Zim
1
Esta es la única solución que funcionó para mí. Gracias Zim, esto es genial!
Ryan NZ
83

No se necesita JavaScript. Simplemente agregue la clase .row-eq-heighta su existente .rowasí:

<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 bootstrap no lo envolverá. Entonces agregue un nuevodiv.row.row-eq-height cada 12 columnas.

Consejo: es posible que deba agregar

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

a tu html

Kevin R.
fuente
55
basado en flexbox. No funciona en IE8 o 9, ni en Android 2.x caniuse.com/#feat=flexbox
Chris Moschini
6060
Nota: getbootstrap.vn no es "Bootstrap". Es un proyecto de terceros.
Zim
Sin embargo, esto parece estar integrado en Bootstrap v4.
Cyril Duchon-Doris
Incluí el CSS correcto (del sitio .vn) pero lo estropea todo. se basa en flex
ekkis
Genial ... plugin infierno.
Armada
63

Para responder a su pregunta, esto es todo lo que necesita; vea una demostración receptiva completa con css prefijado :

/* 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 soporte para contenido en miniatura flexible 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 a continuación, puede usar la demostración con una alternativa utilizando etiquetas condicionales con algo como las cuadrículas 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 la tabla es una idea decente pero se está implementando incorrectamente. La aplicación de ese CSS en las clases de columna de arranque específicamente romperá sin duda el marco de la cuadrícula por completo. Debe usar un selector personalizado para uno y dos estilos de tablas que no se deben aplicar a los [class*='col-']que tienen anchos definidos. Este método SOLO debe usarse si desea columnas de igual altura y ancho igual. No está destinado a ningún otro diseño y NO responde. Sin embargo, podemos hacerlo retroceder 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 en 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 columnas de arranque. La razón de 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 a su lado, sino a todo el contenedor. Este método tampoco le permitirá aplicar márgenes inferiores a las filas por más tiempo y también causará otros problemas en el camino, como desplazarse para anclar etiquetas.

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

Bryan Willis
fuente
11
Esa es la única respuesta que realmente funcionó para mí. Las 3 respuestas mejor calificadas fueron solo una pérdida de tiempo
ken2k
3
Se ve bien, pero desafortunadamente no funciona en Safari 9.1 en MacOS :-(
KevinH
1
@TheSchecke aquí está la solución. Hasta donde yo sé, esto funciona en todos los navegadores compatibles con flexbox ahora. Avísame si me equivoco. s.codepen.io/bootstrapped/debug/pboJNd . El problema tenía que ver con row:after, row:beforetener display: conjunto de tablas que aparentemente a Safari no le gusta.
Bryan Willis
2
Solo un aviso de que esto se rompe realmente en el navegador Safari del iPad
Matthew Lock
1
Lamento escuchar eso @MatthewLock. Acabo de probar en mi iPad Air IOS 8.1 con el último safari y funciona en eso. También pude probar en crossbrowsertesting.com usando iPad mini retina con Safari 7 y eso parece estar funcionando bien también. Aquí están los resultados de esa prueba. ¿Puede proporcionar la versión de iPad y Safari que está utilizando? Me encantaría intentar solucionar esto lo antes posible o al menos poner un comentario en la respuesta, ya que sé que mucha gente lo está utilizando.
Bryan Willis
42

Solo muestra una fila, por lo que su caso de uso puede limitarse solo a eso. En caso de que tengas varias filas, este plugin - 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 recomendarla como un enfoque alternativo.

globalSchmidt
fuente
1
La única solución que realmente funciona y no rompe la capacidad de respuesta
Artur Kędzior
¿Esto le permite especificar que las columnas deben ser cuadradas, o todas tienen la misma altura?
niico
@niico 14: ha pasado un tiempo desde que usé esto, pero en mi aplicación el requisito es que los elementos en cada fila tengan la misma altura, pero la altura puede variar de una fila a otra. Dado que la altura es una función de los elementos en la fila, si la altura de su elemento es igual a su ancho, entonces deben presentarse como cuadrados.
globalSchmidt
30

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);
});
paulalexandru
fuente
1
Tenga una div class = "row" con un número variable de paneles, cada uno de la clase "col-md-4", que debería darme 3 columnas y un número desconocido de filas, dependiendo del número de elementos que quiero enumerar. Este JS funcionó y requiere un cambio mínimo en mi HTML / CSS, a diferencia de varias cosas CSS que probé. Lo único que cambié fue marcar todos los paneles de mis columnas con una clase adicional, es decir, "same-height-panel" y luego usar $ (".
Same
1
La única solución que funcionó para mí después de un día de experimentar con cosas CSS.
Dinosaurius
1
Esta es una buena solución, pero .ready()no es el momento adecuado para llamarla, debería llamarse a.load()
jave.web
1
@ jave.web Si crees que esta es una buena solución, dale un visto bueno. Gracias
paulalexandru
Usar en su window.onload = function() {...function content above...}lugar. Esto funciona mejor
Blackpanther0001
10

Intenté 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 columnas Bootstrap de igual altura 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 polyfill, las columnas se comportarán como las columnas Bootstrap habituales, por lo que es una muy buena alternativa.

Adam Lindqvist
fuente
Esto funcionó brillantemente para mí. ¡Gracias!
randlet
8

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 tuviera la misma altura para que los bordes se vieran irregulares. Para esto creé una clase css simple.

.row.borders{
    display: inline-flex;
    width: 100%;
}
Steffan Perry
fuente
2
Si bien logra que todos los contenidos de la fila tengan la misma altura; Esto rompe la capacidad de respuesta de Bootstrap.
Christine268
7

descarada solución jquery 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 receptiva 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 estableció la última altura más alta en la $.each()función

Marty
fuente
Esto es sencillo: simple y pequeño, pero redimensionará todas las columnas sin necesidad de tener un número fijo de columnas en una fila. ¡Buena esa!
Jordon
1
Esto no funciona, porque establece la última altura más grande en cada función. Si la tercera columna es la columna más alta, las columnas 1 y 2 no obtienen la altura correcta. Debe configurar la última línea "$ (this) .css ({'height': h});" después de cada función. Haré una edición.
Chris
7

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 apilarán, 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 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 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 quieres 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 existe una solución más simple, pero debe asegurarse de proporcionar 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;
}
Zachary Weixelbaum
fuente
Lo hiciste mucho más complicado de lo que necesitabas :) `Solo usa, flex-wrap: wrap;entonces no necesitas todos los separados ... a menos que los desees específicamente.
Bryan Willis
esto falla en iPad Safari
Matthew Lock
6

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

Ejemplo limpio y simple:

Ejemplo de anchos de columna coincidentes en Bootstrap 3

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/5kmtfrny/

BuffMcBigHuge
fuente
5

Sé que llego muy tarde, pero ahora puedes usar el atributo de estilo "altura mínima" para lograr tu propósito.

Faiz
fuente
5

Si alguien usa bootstrap 4 y busca columnas de igual altura, solo use el row-eq-heightdiv padre

<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: http://getbootstrap.com.vn/examples/equal-height-columns/

Znaneswar
fuente
3

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 su 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 .col-*clases con esa diferencia que necesita aplicar.row-* clases a la fila misma.

Con .row-sm-eqcolumnas se apilarán en pantallas XS. Si no necesita que se apilen en cualquier pantalla, puede usarlas .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-12y .col-xs-6dentro de una sola fila no funcionaría correctamente.

Alexander S.
fuente
Esto es bueno. Mi solución es la misma. Y existe la posibilidad de tener columnas de igual altura con espacios estándar de 30px de Bootstrap entre columnas usando border-spacingy márgenes negativos.
max
3

Hay un problema con el uso de la Solución 1 mientras se aplica solo en la columna de las filas. Me gustaría 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 suficientes reputaciones)

Станислав Пономарев
fuente
2

Lo mejor que hay:

Reflejo de Github - Docs

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

öbl
fuente
¡Bienvenido a Stack Overflow! Si bien este enlace puede responder la pregunta, es mejor incluir aquí las partes esenciales de la respuesta y proporcionar el enlace como referencia. Las respuestas de solo enlace pueden volverse inválidas si la página vinculada cambia. Vea ¿Cómo escribo una buena respuesta ?
ByteHamster
2

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 fueron 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 usando puntos de interrupción de respuesta porque el flujo generalmente obstaculiza la naturaleza de respuesta estándar de arranque.

Ajay Sathish
fuente
2

Yo uso esta solución súper fácil con 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; ?>
Oleg
fuente
Sin embargo, esto no hace que sus columnas tengan la misma altura.
skerit
1
Para mí, querer tener columnas a la misma altura / lugar en fila, es una solución
Michal - wereda-net
2

Para aquellos que buscan una solución rápida y fácil: si tiene un conjunto relativamente consistente de contenido de bloque, 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;
}
Neal
fuente
2

.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 debe agregarse a un elemento con estilo .row al 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 del relleno a todos los .col *.

DarkScrolls
fuente
2

¡Busqué una solución para el mismo problema y encontré una que simplemente funcionó! - casi sin código extra ...

vea https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 para una buena disuccuion, 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) forma de hacer columnas de igual altura en un diseño receptivo es usar CSS3 flexbox.

.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..
kfn
fuente
1
@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 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 siguen siendo 4- 6% de uso dependiendo de cómo mida, y para muchos usuarios corporativos es mucho peor. http://caniuse.com/#feat=flexbox

El display: table, display: table-celltruco es compatible con versiones más - y una gran cosa es el problema sólo seria un problema de compatibilidad es Safari, donde la fuerzas box-sizing: border-box, algo que ya se aplica a las etiquetas de Bootstrap. http://caniuse.com/#feat=css-table

Obviamente, puede agregar más clases que hacen cosas similares, como .equal-height-md . Los relacioné con 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 Less proporcionaría de otra manera están codificadas en el ejemplo vinculado. Por ejemplo, @ screen-sm-min ha sido reemplazado por lo que Less insertaría: 768px.

Chris Moschini
fuente
1

Si tiene sentido en su contexto, simplemente puede agregar un div de 12 columnas vacío después de cada salto, que actúa como un divisor que abraza la parte inferior 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!

Chris Staikos
fuente
¡Esto no responde la pregunta que hizo!
Ellisan
0

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 para los formularios de arranque, necesitará ajustar el contenido del formulario que solo sirve para replicar una estructura similar a una tabla.

El siguiente ejemplo también proporciona el CSS que demuestra que una consulta de medios adicional permite que Bootstrap 3 simplemente tome el control y haga 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;
  }
}
JoeTidee
fuente
0

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

grinmax
fuente
0

Entonces, sí, Bootstrap 4 hace que todos los cols en una fila tengan la misma altura, sin embargo, si está creando un borde alrededor del contenido dentro de la fila, puede encontrar que parece que los cols no tienen la misma altura.

Cuando apliqué height: 100%al elemento dentro de la columna, descubrí que había perdido mi margen.

Mi solución es usar relleno en el div de la columna (en lugar de un margen en el elemento interno). Al igual que:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

El ejemplo de código anterior usa Bootstrap 4.1 para crear un conjunto de nueve cuadros con un borde

Dagmar
fuente
0

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()
});
Pacific P. Regmi
fuente
0

19/03/2019

** Solución Bootstrap 4 de igual altura **

Bootstrap Utilities / flex para igual altura

Ejemplo en vivo en Codepen

Altura igual por clase bootstrap con div padre fijo heightomin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

MD Ashik
fuente
3
¿Por qué me das voto negativo? ¿Puedes hacer un comentario al respecto?
MD Ashik
-1

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>
Tom Kur
fuente
No me funcionó con un botón en una de las columnas.
Ray Hunter