Wie kann ich mit dem Flexbox-Raster und den Kartenspalten von Bootstrap 4 ein Mauerwerkslayout erstellen?

Implementieren eines Mauerwerkslayouts mit Bootstrap 4 Flexbox Grid

Das Erstellen eines Mauerwerkslayouts mit gleichhohen Säulen kann mit dem Flexbox-Rastersystem von Bootstrap 4 eine Herausforderung sein. Sie können dies jedoch effektiv mit einigen integrierten Bootstrap-Klassen erreichen.

Kartenspalten-Funktion

Bootstrap 4 bietet die Kartenspalten-Funktion, die CSS-Spalteneigenschaften nutzt, um Karten wie ein Mauerwerksgitter auszurichten . Diese Methode vereinfacht den Ausrichtungsprozess und verhindert, dass Karten spaltenübergreifend aufgebrochen werden.

<div class="container">
  <div class="card-columns">
    ...Your cards HTML code...
  </div>
</div>

Karten auf „Inline-Block“ einstellen

Um zu verhindern, dass Karten spaltenübergreifend aufgebrochen werden, wird empfohlen, sie so einzustellen, dass sie Folgendes anzeigen: Inline-Block innerhalb des Kartenspalten-Containers. Dies liegt daran, dass der standardmäßige Column-Break-Inside: Avoid-Stil nicht vollständig zuverlässig ist.

.card {
  display: inline-block;
}

Beispielcode

Hier ist ein Beispielcode-Snippet, das das Mauerwerkslayout mit Bootstrap 4-Karten demonstriert:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">

Das obige ist der detaillierte Inhalt vonWie kann ich mit dem Flexbox-Raster und den Kartenspalten von Bootstrap 4 ein Mauerwerkslayout erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!