Wie eliminiere ich Lücken in gestapelten Bootstrap-Zeilen?

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 Tool wie Mauerwerk, um die Elementhöhen automatisch anzupassen und an den verfügbaren Raum anzupassen.

3. Responsives Spalten-Reset:

Bootstrap bietet „responsives Spalten-Reset“. 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:

<div class="row portfolio">
  <div class="col-lg-2 col-sm-3 col-xs-4">
    <div class="panel panel-default">
      ... (Element content)
    </div>
  </div>
  <div class="clear"></div>  <!-- Added after each element -->
  ... (Additional elements)
</div>

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

Das obige ist der detaillierte Inhalt vonWie eliminiere ich Lücken in gestapelten Bootstrap-Zeilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!