Lacunas em linhas empilhadas do Bootstrap: soluções

Em grades baseadas em Bootstrap, é comum encontrar problemas com lacunas quando blocos de alturas variadas são empilhados . Para resolver isso, considere as seguintes abordagens:

1. Definir alturas dos elementos:

Atribua uma altura fixa a todos os elementos do portfólio para garantir um alinhamento consistente.

2. Layout de alvenaria:

Use uma ferramenta como Masonry para ajustar automaticamente as alturas dos elementos e ajustá-los ao espaço disponível.

3. Redefinição de colunas responsivas:

O Bootstrap fornece "redefinições de colunas responsivas". Ao aplicar essas classes à sua grade, você pode definir dinamicamente as alturas das colunas e evitar lacunas.

4. Clearfix com consultas de mídia:

Após cada elemento, adicione um div com um mini clearfix. Isso pode ser ocultado usando consultas de mídia, resolvendo efetivamente o problema de lacuna.

Exemplo de código:

  

    

      ... (Element content)
    
  
  
  
  ... (Additional elements)

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

Abordagem jQuery:

var row=$('.portfolio');
$.each(row, function() {
  var maxh = 0;
  $.each($(this).find('div[class^="col-"]'), function() {
    if($(this).height() > maxh)
      maxh = $(this).height();
  });
  $.each($(this).find('div[class^="col-"]'), function() {
    $(this).height(maxh); // Set element heights uniformly
  });
});