Wie kann ich mit dem Flexbox Grid von Bootstrap 4 ein Mauerwerkssäulenlayout erstellen?

Layout von Mauerwerkssäulen mit Flexbox-Raster in Bootstrap 4

Während das Flexbox-Rastersystem in Bootstrap 4 Vielseitigkeit bei der Erstellung responsiver Layouts bietet, stimmt es dass die Spalten zunächst mit gleicher Höhe angezeigt werden. Es ist jedoch möglich, mit der Funktion „Kartenspalten“ ein Mauerwerkssäulenlayout zu erreichen.

Kartenspalten

Wie in der Bootstrap 4-Dokumentation erläutert, „können Karten sein mit nur CSS in Masonry-ähnlichen Spalten organisiert, indem man sie in .card-columns einschließt.“ Diese Funktion nutzt CSS-Spalteneigenschaften und gewährleistet so eine einfachere Ausrichtung im Vergleich zu Flexbox.

Um ein Mauerwerkssäulenlayout zu erstellen, wickeln Sie Ihre .card-Elemente einfach in einen .card-columns-Container ein. Die Karten ordnen sich dann dynamisch an, wobei ihre Höhe durch ihren Inhalt bestimmt wird.

Dieser Ansatz behält die Einfachheit und Reaktionsfähigkeit des Flexbox-Rasters von Bootstrap bei und sorgt gleichzeitig für den gewünschten Mauerwerkseffekt.

Beispiel

Unten finden Sie ein Codebeispiel, das die Verwendung von Kartenspalten zum Erstellen eines Mauerwerks demonstriert Layout:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card content</p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Another card title</h5>
        <p class="card-text">More card content</p>
      </div>
    </div>
    <!-- Additional cards can be added as needed -->
  </div>
</div>

Durch die Verwendung von Kartensäulen können Sie mithilfe des Flexbox-Rastersystems von Bootstrap 4 ganz einfach das gewünschte Mauerwerkssäulenlayout erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit dem Flexbox Grid von Bootstrap 4 ein Mauerwerkssäulenlayout erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!