Linha de bootstrap com colunas de altura diferente

Atualmente, tenho algo como:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Agora assumindo isso, contenthavia caixas de alturas diferentes, com todas a mesma largura - como eu poderia manter o mesmo "layout baseado em grade" e ainda ter todas as caixas alinhadas umas sobre as outras, em vez de em linhas perfeitas.

Atualmente o TWBS colocará a próxima linha col-md-4sob o elemento mais longo na terceira linha anterior., Portanto, cada linha de itens está perfeitamente alinhada e limpa - embora seja incrível, quero que cada item caia diretamente sob o último elemento (layout de "Alvenaria" )

Esta é uma pergunta popular sobre Bootstrap, então eu atualizei e expandi a resposta para Bootstrap 3 e Bootstrap 4 ...

O " problema de altura " do Bootstrap 3 ocorre porque as colunas usam . Quando uma coluna está “flutuada”, ela é retirada do fluxo normal do documento. Ele é deslocado para a esquerda ou direita até tocar a borda da caixa que o contém. Portanto, quando você tem alturas de coluna desiguais , o comportamento correto é empilhá-las até o lado mais próximo.float:left

Nota : As opções abaixo são aplicáveis ​​para cenários de agrupamento de coluna onde há mais de 12 unidades de cor em uma única.row . Para leitores que não entendem porque haveria mais de 12 colunas em uma linha , ou pensam que a solução é "usar linhas separadas" devem ler isto primeiro

Existem algumas maneiras de corrigir isso .. (atualizado para 2018)

1 - A abordagem 'clearfix' ( recomendada pelo Bootstrap ) como esta (requer iteração a cada X colunas). Isso forçará uma quebra a cada número X de colunas ...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (camada única)

Clearfix Demo (níveis responsivos) - por exemplo.col-sm-6 col-md-4 col-lg-3

Há também uma variação somente de CSS do 'clearfix'
somente de CSS clearfix com tabelas

Como o problema é causado pela diferença de altura, você pode fazer com que as colunas tenham altura igual em cada linha. Flexbox é a melhor maneira de fazer isso e é nativamente suportado no Bootstrap 4 ...

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

Demonstração da Flexbox com altura igual

Novamente, o problema de altura ocorre apenas porque as colunas flutuam. Outra opção é definir as colunas como display:inline-blocke float:none. Isso também fornece mais flexibilidade para alinhamento vertical. No entanto, com esta solução, não deve haver nenhum espaço em branco HTML entre as colunas , caso contrário, os elementos do bloco embutido terão espaço adicional e serão quebrados prematuramente.

Demonstração da correção do bloco embutido

4 - Abordagem de colunas CSS3 (solução tipo Alvenaria / Pinterest).

Isso não é nativo do Bootstrap 3, mas outra abordagem que usa multi-colunas CSS . Uma desvantagem dessa abordagem é que a ordem das colunas é de cima para baixo em vez de da esquerda para a direita. O Bootstrap 4 inclui este tipo de solução : Bootstrap 4 Demonstração dos cartões de alvenaria .

Demonstração de 3 colunas de bootstrap

5 - Abordagem de Maçonaria JavaScript / jQuery

Finalmente, você pode querer usar um plugin como Isótopo / Maçonaria:

Demonstração de Maçonaria Bootstrap Demonstração de
Maçonaria 2

Mais sobre Bootstrap Colunas de Altura Variável

Atualização 2018
Todas as colunas têm a mesma altura no Bootstrap 4 porque ele usa o flexbox por padrão, então o "problema de altura" não é um problema. Além disso, o Bootstrap 4 inclui este tipo de solução com várias colunas: Demonstração de cartões de alvenaria Bootstrap 4 .

Por algum motivo, isso funcionou para mim sem a classe .display-flex

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

Criei outra extensão (que também é reativa) para a linha de bootstrap. Você pode tentar algo assim:

.row.flexRow { display: flex; flex-wrap: wrap;}