Brechas en filas de Bootstrap apiladas: soluciones

En las cuadrículas basadas en Bootstrap, es común encontrar problemas con espacios cuando se apilan mosaicos de diferentes alturas . Para abordar esto, considere los siguientes enfoques:

1. Establecer alturas de elementos:

Asigne una altura fija a todos los elementos dentro del portafolio para garantizar una alineación consistente.

2. Diseño de mampostería:

Utilice una herramienta como Masonry para ajustar automáticamente las alturas de los elementos y ajustarlos dentro del espacio disponible.

3. Restablecimiento de columnas responsivas:

Bootstrap proporciona "restablecimientos de columnas responsivos". Al aplicar estas clases a su cuadrícula, puede establecer dinámicamente las alturas de las columnas y evitar espacios.

4. Clearfix con consultas de medios:

Después de cada elemento, agregue un div con un mini clearfix. Esto se puede ocultar mediante consultas de medios, abordando eficazmente el problema de la brecha.

Ejemplo de código:

  

    

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

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

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