Lücken in gestapelten Bootstrap-Zeilen: Lösungen

In Bootstrap-basierten Rastern kommt es häufig zu Problemen mit Lücken, wenn Kacheln unterschiedlicher Höhe gestapelt werden . Um dieses Problem anzugehen, sollten Sie die folgenden Ansätze in Betracht ziehen:

1. Elementhöhen festlegen:

Weisen Sie allen Elementen im Portfolio eine feste Höhe zu, um eine konsistente Ausrichtung sicherzustellen.

2. Mauerwerkslayout:

Verwenden Sie ein Werkzeug wie Mauerwerk, um die Elementhöhen automatisch anzupassen und an den verfügbaren Raum anzupassen.

3. Responsives Zurücksetzen von Spalten:

Bootstrap bietet „responsives Zurücksetzen von Spalten“. Durch die Anwendung dieser Klassen auf Ihr Raster können Sie Spaltenhöhen dynamisch festlegen und Lücken vermeiden.

4. Clearfix mit Medienabfragen:

Fügen Sie nach jedem Element ein Div mit einem Mini-Clearfix hinzu. Dies kann mithilfe von Medienabfragen ausgeblendet werden, wodurch das Lückenproblem effektiv behoben wird.

Codebeispiel:

  

    

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

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

jQuery-Ansatz:

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