Kann das Flexbox Grid von Bootstrap 4 Mauerwerkslayouts erstellen?

Verwenden des Bootstrap 4 Flexbox-Rasters für Mauerwerkslayouts

Bootstrap 4 verwendet ein Flexbox-Rastersystem für das Spaltenlayout. Einige Benutzer fragen sich jedoch möglicherweise, ob es möglich ist, mit diesem Flexbox-Raster ein Mauerwerkslayout zu erstellen, bei dem Säulen unterschiedliche Höhen haben.

Die Antwort lautet: Ja, es ist mit Standard-Bootstrap-4-Klassen machbar. Die Dokumentation enthält einen speziellen Abschnitt zu Kartenspalten, die diese Funktionalität ermöglichen.

Kartenspaltenfunktion

Wie in der Bootstrap 4-Dokumentation angegeben:

" Karten können mit nur CSS in .card-columns-Spalten organisiert werden. Karten werden zur einfacheren Ausrichtung mit CSS-Spalteneigenschaften erstellt werden von oben nach unten und von links nach rechts geordnet .

Überlegungen

Bleiben Sie dran Beachten Sie, dass die Verwendung von Kartenspalten möglicherweise nicht in allen Situationen ideal ist. Um zu verhindern, dass Karten über mehrere Spalten verteilt werden, wird empfohlen, ihre Anzeigeeigenschaft auf „inline-block“ zu setzen. Allerdings ist die CSS-Eigenschaft „column-break-inside:void“ noch keine völlig zuverlässige Lösung.

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

Das obige ist der detaillierte Inhalt vonKann das Flexbox Grid von Bootstrap 4 Mauerwerkslayouts erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!