Como posso criar colunas do Bootstrap da mesma altura?


965

Estou usando o Bootstrap. Como posso criar três colunas da mesma altura?

Aqui está uma captura de tela do problema. Gostaria que as colunas azuis e vermelhas tivessem a mesma altura que a coluna amarela.

Três colunas de autoinicialização com a coluna central mais longa que as outras duas colunas

Aqui está o 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>



11
Há um artigo no site de bootstrap com uma solução de 5-linhas getbootstrap.com.vn/examples/equal-height-columns
Eduard Gamoral

2
O exemplo no Bootstrap quebra a capacidade de resposta do Eduard. O flex .rowestá faltando flex-wrap: wrap;. Aqui está um exemplo de que trabalhar com a capacidade de resposta: codepen.io/bootstrapped/details/RrabNe
Bryan Willis

Solução possível - uma imagem transparente com 1 pixel de largura nas outras colunas. Esta nova imagem de largura de um pixel corresponde à altura do pixel da foto dos gatos no exemplo acima. (Pode não funcionar ou ser prático em sua situação)
Sql Surfer

No Bootstrap 4, podemos usar o cartão da mesma maneira
Amjad Rehman A

Respostas:


1045

Solução 4 usando o Bootstrap 4

O Bootstrap 4 usa o Flexbox, portanto não há necessidade de CSS extra.

Demo

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

Solução 1 usando margens negativas (não quebra a capacidade de resposta)

Demo

.row{
    overflow: hidden; 
}

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

Solução 2 usando a tabela

Demo

.row {
    display: table;
}

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

Solução 3 usando flex adicionada em agosto de 2015. Os comentários publicados antes disso não se aplicam a esta solução.

Demo

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

7
Pense nisso como a coluna sendo sugada para o espaço negativo. Se você remover o estouro, verá o que está acontecendo.
Popnoodles

9
Se você tiver como alvo especificamente a classe da coluna de autoinicialização, provavelmente deverá usar uma âncora ^ em vez de um curinga *. Usar ^ dirá que a classe deve começar com col- where, pois o curinga mostrado corresponderá a qualquer classe com col- em qualquer lugar da string, possivelmente causando efeitos indesejados nos estilos em que você pode ter usado a convenção col-. (ou seja, stuff-col-morestuff).
Logan G.

7
Boa resposta, com algumas ressalvas. A solução 1 desativa o flutuador e, portanto, interrompe o comportamento responsivo da grade de inicialização. A solução 2 (explicada em maior profundidade em positioniseverything.net/articles/onetruelayout/equalheight ) não mostra a borda inferior (pois é cortada em algum lugar no espaço de preenchimento).
Oade Schneider

14
A solução 3 interrompe a capacidade de resposta da linha.
SPRBRN

10
@ Popnoodles, você deve adicionar flex-wrap: wrap;ao terceiro exemplo para ativar a capacidade de resposta. Você também vai querer adicionar display: flex; direção flexível: coluna; para a classe da coluna. Se você usar o .row e não uma classe personalizada, precisará fornecer um substituto para navegadores mais antigos, alterando a flexibilidade da tela. Aqui está um exemplo
Bryan Willis

321

Atualização 2020

Melhor abordagem para o Bootstap 3.x - usando CSS flexbox (e requer CSS mínimo).

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

Exemplo de flexbox de mesma altura de inicialização

Para aplicar apenas a mesma caixa flexível da altura em pontos de interrupção específicos (responsivos), use uma consulta de mídia. Por exemplo, aqui está sm(768px) e superior:

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

Essa solução também funciona bem para várias linhas (quebra de coluna):
https://www.bootply.com/gCEXzPMehZ

Outras soluções alternativas

Essas opções serão recomendadas por outros, mas não são uma boa ideia para o design responsivo. Isso funciona apenas para layouts de linha única simples sem quebra de coluna.

1) Usando enormes margens negativas e preenchimento

2) Usando display: célula de tabela (esta solução também afeta a grade responsiva, portanto, uma consulta @media pode ser usada apenas para aplicar a tableexibição em telas mais largas antes que as colunas se empilhem verticalmente)


Bootstrap 4

Agora, o Flexbox é usado por padrão no Bootstrap 4, portanto, não é necessário que o CSS extra crie colunas de altura igual: http://www.codeply.com/go/IJYRI4LPwU

Exemplo:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

5
Você pode usar uma consulta de mídia para aplicar apenas o flexbox em dispositivos maiores / maiores. Atualizei o bootply: bootply.com/Cn6fA6LuTq
Zim

Caso alguém esteja interessado, criei uma caneta para demonstrar efeitos semelhantes em um formulário usando o flexbox.
Justin Lau

2
É um bug conhecido do Safari com flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730
Zim

5
@ Stanley, o comentário sobre "não responde mais" é antigo e irrelevante.
Zim 29/03

1
Esta é a única correção que funcionou para mim. Obrigado Zim, isso é ótimo!
Ryan NZ

83

Não é necessário JavaScript. Basta adicionar a classe .row-eq-heightà sua existente .rowda seguinte maneira:

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

Dica: se você tiver mais de 12 colunas em sua linha, a grade de autoinicialização não conseguirá agrupá-la. Portanto, adicione um novo a div.row.row-eq-heightcada 12 colunas.

Dica: pode ser necessário adicionar

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

para o seu html


5
baseado em flexbox. Não funciona no IE8 ou 9, nem Android 2.x caniuse.com/#feat=flexbox
Chris Moschini

60
Nota: getbootstrap.vn não é "Bootstrap". É um projeto de terceiros.
Zim

Isso parece estar integrado no bootstrap v4.
Cyril Duchon-Doris

Eu incluí o CSS correto (do site .vn), mas isso atrapalha tudo. é baseado em flex
ekkis 05/10

Ótimo ... plugin inferno.
Armada

63

Para responder sua pergunta, é tudo o que você precisa: veja a demonstração responsiva completa com o css prefixado :

/* 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 tela do Codepen

Para adicionar suporte ao conteúdo em miniatura, flexione-o em colunas flexíveis como a captura de tela acima, adicione-o também ... Observe que você também pode fazer isso com painéis:

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

Embora o flexbox não funcione no IE9 e abaixo, você pode usar a demonstração com um fallback usando tags condicionais com algo como grades javascript como um polyfill:

<!--[if lte IE 9]>

<![endif]-->

Quanto aos outros dois exemplos da resposta aceita ... A demonstração da tabela é uma ideia decente, mas está sendo implementada incorretamente. A aplicação específica desse CSS nas classes de coluna de autoinicialização sem dúvida quebrará completamente a estrutura da grade. Você deve usar um seletor personalizado para um e dois estilos de tabelas não devem ser aplicados com [class*='col-']larguras definidas. Este método deve ser usado SOMENTE se você quiser colunas de altura e largura iguais. Não se destina a outros layouts e NÃO é responsivo. No entanto, podemos torná-lo substituto em monitores móveis ...

<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 fim, a primeira demonstração da resposta aceita, que implementa uma versão do único layout verdadeiro, é uma boa opção para algumas situações, mas não é adequada para colunas de autoinicialização. A razão para isso é que todas as colunas se expandem para a altura do contêiner. Portanto, isso também interromperá a capacidade de resposta, pois as colunas não estão se expandindo para os elementos próximos a elas, mas para todo o contêiner. Esse método também não permitirá que você aplique margens inferiores às linhas por mais tempo e também causará outros problemas ao longo do caminho, como rolagem para tags de ancoragem.

Para obter o código completo, consulte o Codepen, que prefixa automaticamente o código do flexbox.


11
Essa é a única resposta que realmente funcionou para mim. O top 3 respostas classificadas eram apenas um desperdício de tempo
ken2k

3
Parece bom, mas infelizmente ele não funciona no Safari 9.1 no MacOS :-(
KevinH

1
@TheSchecke, aqui está a solução. Até onde eu sei, isso funciona em todos os navegadores suportados pelo flexbox agora. Por favor, deixe-me saber se estou errado. s.codepen.io/bootstrapped/debug/pboJNd . O problema estava relacionado ao fato de row:after, row:beforeter display: table set que aparentemente o Safari não gosta.
Bryan Willis

2
Apenas um heads-up que este breaks realmente mal no navegador Safari do iPad
Matthew Bloqueio

1
Lamento ouvir isso @MatthewLock. Acabei de testar no meu IPad Air IOS 8.1 com o safari mais recente e funciona nisso. Também pude testar no crossbrowsertesting.com usando a mini retina do iPad com o Safari 7 e isso parece estar funcionando bem também. Aqui estão os resultados desse teste. Você pode fornecer a versão do iPad e Safari que está usando? Eu adoraria tentar corrigir isso o mais rápido possível ou, pelo menos, colocar um comentário na resposta, pois sei que muitas pessoas o estão usando.
Bryan Willis

42

Você mostra apenas uma linha para que seu caso de uso possa ser limitado a isso. Caso você tenha várias linhas, este plugin - github Javascript-grids - funciona perfeitamente! Faz com que cada painel se expanda para o painel mais alto, dando a cada linha potencialmente uma altura diferente com base no painel mais alto dessa linha. É uma solução jquery vs. css, mas queria recomendá-la como uma abordagem alternativa.


1
A única solução que realmente funciona e não quebrar a capacidade de resposta
Artur Kędzior

Isso permite que você especifique que as colunas devem ser quadradas - ou todas da mesma altura?
Niico 3/11

@niico 14 - já faz um tempo desde que eu usei isso, mas na minha aplicação o requisito é que os elementos em cada linha tenham a mesma altura, mas a altura pode variar de uma linha para outra. Como a altura é uma função dos elementos da linha, se a altura do elemento for igual à largura deles, eles deverão se apresentar como quadrados.
globalSchmidt

30

Se você quiser fazer isso funcionar em qualquer navegador, use javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

1
Tenha uma div class = "row" com número variável de painéis, cada um da classe "col-md-4", que deve me fornecer 3 colunas e um número desconhecido de linhas, dependendo do número de itens que eu quero listar. Esse JS funcionou e requer uma alteração mínima no meu HTML / CSS, em oposição a várias coisas de CSS que tentei. A única coisa que mudei foi marcar todos os meus painéis de coluna com classe adicional, ou seja, "mesmo painel de altura" e depois usar $ (". Mesmo painel de altura") em vez de $ (". Painel")
nidalpres

1
A única solução que funcionou para mim depois de um dia experimentando coisas em CSS.
Dinosaurius

1
Esta é uma boa solução, mas .ready()não é a hora certa para chamá-la - ela deve ser chamada #.load()
jave.web

1
@ jave.web Se você acha que essa é uma boa solução, dê um joinha. Obrigado
paulalexandru

Use em window.onload = function() {...function content above...}vez disso. Isso funciona melhor.
Blackpanther0001

10

Tentei várias sugestões feitas neste tópico e em outras páginas, mas nenhuma solução funcionou 100% em todos os navegadores.

Então, experimentei bastante tempo e criei isso. Uma solução completa para colunas Bootstrap Equal Height com a ajuda do flexbox com apenas 1 classe. Isso funciona nos principais 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 oferecer suporte a ainda mais versões do IE, você pode, por exemplo, usar https://github.com/liabru/jquery-match-height e direcionar todas as colunas filho de .equal-cols. Como isso:

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

Sem esse polyfill, as colunas se comportarão como as colunas normais do Bootstrap, o que é um bom retorno.


Isso funcionou brilhantemente para mim. Obrigado!
Randlet

8

Você também pode usar o inline-flex, que funciona muito bem e pode ser um pouco mais limpo do que modificar todos os elementos de linha com CSS.

Para o meu projeto, eu queria que todas as linhas cujos elementos filhos tivessem bordas da mesma altura para que as bordas parecessem irregulares. Para isso, criei uma classe css simples.

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

2
Embora consiga fazer com que todo o conteúdo da linha tenha a mesma altura; Isso interrompe a capacidade de resposta do Bootstrap.
Christine268


7

solução jquery atrevida, se alguém estiver interessado. Apenas certifique-se de que todas as suas colunas tenham um nome de classe comum ... funcione responsivamente também se você o vincular 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: Este post foi editado de acordo com o comentário do @Chris, indicando que o código foi definido apenas como a última altura mais alta na $.each()função


Isso é subestimado - simples e pequeno, mas redimensiona todas as colunas sem a necessidade de ter um número fixo de colunas seguidas. Agradável!
Jordon

1
Isso não está funcionando, porque você define a última maior altura em cada função. Se a terceira coluna for a coluna mais alta, as colunas 1 e 2 não estão obtendo a altura correta. Você deve definir a última linha "$ (this) .css ({'height': h});" após a cada função. Eu vou fazer uma edição.
Chris

7

Algumas das respostas anteriores explicam como tornar os divs a mesma altura, mas o problema é que, quando a largura é muito estreita, os divs não se acumulam; portanto, você pode implementar suas respostas com uma parte extra. Para cada um, você pode usar o nome CSS fornecido aqui, além da classe de linha que você usa, portanto, a div deve ser assim se você sempre quiser que as divs fiquem próximas uma da outra:

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

Para todas as telas:

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

Para quando você quiser usar o 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 quando você quiser 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 quando você quiser usar o 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 Com base em um comentário, existe de fato uma solução mais simples, mas você precisa fornecer informações da coluna da maior largura desejada para todos os tamanhos até xs (por exemplo <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;
}

Você tornou isso muito mais complicado do que o necessário :) `Basta usar flex-wrap: wrap;e não precisar de todos os separados ... a menos que você os queira especificamente.
Bryan Willis

isto falhar no iPad Safari
Matthew Bloqueio

6

Estou surpreso por não encontrar uma solução interessante aqui no final de 2018. Fui em frente e descobri uma solução Bootstrap 3 usando flexbox.

Exemplo limpo e simples:

Exemplo de larguras de colunas correspondentes no 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 demonstração de trabalho: http://jsfiddle.net/5kmtfrny/


5

Sei que estou muito atrasado, mas agora você pode usar o atributo de estilo "altura mínima" para atingir seu objetivo.


5

Se alguém usando o bootstrap 4 e procurando colunas com a mesma altura, use row-eq-heightpara parent div

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


3

aqui está minha solução (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;
  }
}

Portanto, seu código seria semelhante a:

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

Basicamente, este é o mesmo sistema que você usa com .col-*classes com essa diferença que você precisa para aplicar .row-*classes à própria linha.

Com .row-sm-eqcolunas serão empilhadas nas telas XS. Se você não precisar que eles estejam empilhados em qualquer tela, poderá usar .row-xs-eq.

A versão do SASS que realmente usamos:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Demonstração ao vivo


Nota: misturar .col-xs-12e .col-xs-6dentro de uma única linha não funcionaria corretamente.


Isso é bom. Minha solução é a mesma. E existe a possibilidade de ter colunas de altura igual com intervalos de 30px do Bootstrap padrão entre colunas usando border-spacinge margens negativas.
max

3

Há um problema com o uso da solução 1 ao aplicá-lo apenas na coluna de linhas. Gostaria de melhorar a Solução 1.

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

(Desculpe, não posso comentar a resposta de Popnoodles. Não tenho reputação suficiente)


2

Melhor por aí:

Reflexo do Github - Documentos

Funciona com bootstrap

Atualizar:

  1. Inclua o CSS
  2. Atualize seu 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: ldjordan@gmail.com
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}
<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>


Bem-vindo ao Stack Overflow! Embora esse link possa responder à pergunta, é melhor incluir aqui as partes essenciais da resposta e fornecer o link para referência. As respostas somente para links podem se tornar inválidas se a página vinculada for alterada. Consulte Como escrevo uma boa resposta .
ByteHamster

2

Aqui está o meu método, usei o flex com algumas alterações na consulta de mídia.

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

em seguida, adicionaram as classes aos pais necessárias.

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

Estou usando pontos de interrupção responsivos porque o fluxo geralmente dificulta a natureza responsiva padrão de autoinicialização.


2

Eu uso essa solução super fácil com clearfix , que não tem efeitos colaterais.

Aqui está um exemplo no 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>

E mais um exemplo no 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; ?>

Porém, isso não torna suas colunas da mesma altura.
Skerit

1
Para mim, querer ter colunas na mesma altura / local em fila é uma solução
Michal - wereda-net 25/03

2

Para aqueles que procuram uma solução rápida e fácil - se você tiver um conjunto relativamente consistente de conteúdo de bloco, defina uma altura mínima na div um pouco maior que o maior bloco pode ser mais fácil de implementar.

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

2

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

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

onde .container-height é a classe de estilo que deve ser adicionada a um elemento com estilo .row, no qual todos os seus filhos .col * têm a mesma altura.

A aplicação desses estilos somente a um .row específico (com a altura do recipiente., Como no exemplo) também evita aplicar a margem e o excesso de preenchimento a todos os .col *.


2

Procurei uma solução para o mesmo problema e encontrei uma que funcionava !! - com quase nenhum código extra ..

consulte https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 para obter uma boa dissucção e com a resposta que você deseja na parte inferior, com um link.

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

esta foi a maneira correta de responder a mim ... uma citação: ... 3 - Use o flexbox (melhor!)

A partir de 2017, a melhor (e mais fácil) maneira de criar colunas de altura igual em um design responsivo é usar o flexbox CSS3.

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

e simplesmente use:

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

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>

Exemplo:

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

Adaptado de várias respostas aqui. As respostas baseadas no flexbox são o caminho certo quando o IE8 e o 9 estão mortos, e o Android 2.x está morto, mas isso não é verdade em 2015 e provavelmente não será em 2016. O IE8 e 9 ainda compõem 4- 6% de uso, dependendo de como você avalia, e para muitos usuários corporativos é muito pior. http://caniuse.com/#feat=flexbox

O truque display: table, display: table-cellé mais compatível com versões anteriores - e uma grande coisa é o único problema sério de compatibilidade é um problema do Safari em que ele força box-sizing: border-box, algo já aplicado às suas tags Bootstrap. http://caniuse.com/#feat=css-table

Obviamente, você pode adicionar mais aulas que fazem coisas semelhantes, como .equal-height-md. Eu os vinculei a divs para o pequeno benefício de desempenho em meu uso restrito, mas você pode remover a tag para torná-la mais generalizada como o restante do Bootstrap.

Observe que o jsfiddle aqui usa CSS e, portanto, as coisas que Less forneceria de outra forma são codificadas no exemplo vinculado. Por exemplo, @ screen-sm-min foi substituído pelo que Less inseriria - 768px.


1

Se fizer sentido no seu contexto, você pode simplesmente adicionar uma div de 12 colunas vazia após cada intervalo, que atua como um divisor que abraça a parte inferior da célula mais alta da sua linha.

<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 isto ajude!


Isso não responde à pergunta que ele fez!
Ellisan

0

Pensei em acrescentar que a resposta dada pelo Dr.Flink também pode ser aplicada a um form-horizontalbloco do Bootstrap 3 - o que pode ser muito útil se você quiser usar cores de fundo para cada célula. Para que isso funcione para formulários de autoinicialização, você precisará agrupar o conteúdo do formulário, que serve apenas para replicar uma estrutura semelhante a uma tabela.

O exemplo abaixo também fornece o CSS, que demonstra uma consulta de mídia adicional, que permite ao Bootstrap 3 simplesmente assumir o controle e fazer o que é normal nas telas menores. Isso também funciona no IE8 +.

Exemplo:

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

0

Tente fazer isso através da caixa flexível

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

JSFiddle ao vivo - https://jsfiddle.net/grinmax_/spsn4fnq/


0

Então, sim, o Bootstrap 4 torna todas as colunas em uma linha com a mesma altura; no entanto, se você estiver criando uma borda em torno do conteúdo dentro da linha, poderá achar que parece que as colunas não têm alturas iguais!

Quando me inscrevi height: 100%no elemento dentro da coluna, descobri que perdi minha margem.

Minha solução é usar preenchimento na div do col (em vez de uma margem no elemento interno). Igual a:

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

O exemplo de código acima usa o Bootstrap 4.1 para criar um conjunto de nove caixas com uma borda


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

0

19/03/2019

** Solução de altura igual ao Bootstrap 4 **

Utilitários de inicialização / flex para altura igual

Exemplo ao vivo no Codepen

Altura igual por classe de bootstrap com div principal fixo heightoumin-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>


3
Por que você me dá voto negativo? você pode fazer um comentário?
MD Ashik

-1

Você pode quebrar as colunas dentro de uma 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>

Não funcionou para mim com um botão em uma das colunas.
Raio do caçador
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.