Wie erreicht man ein Mauerwerkslayout mit den Kartenspalten von Bootstrap 4?

So erstellen Sie ein Mauerwerkslayout mit Flexbox in Bootstrap 4

Das Flexbox-Rastersystem von Bootstrap 4 ermöglicht flexible und reaktionsfähige Spaltenlayouts. Um ein Mauerwerkssäulenlayout zu erstellen, bei dem Elemente innerhalb einer Reihe unterschiedliche Höhen haben, können Sie die Kartenspaltenfunktion von Bootstrap nutzen.

Verwendung von Kartenspalten

Wie im Bootstrap angegeben Dokumentation:

"Karten können mit nur CSS in Masonry-ähnlichen Spalten organisiert werden, indem man sie einschließt .card-columns. Karten werden mit CSS-Spalteneigenschaften anstelle von Flexbox erstellt, um die Ausrichtung zu erleichtern.

Um ein Mauerwerkslayout zu erstellen, wickeln Sie einfach Ihre .card-Elemente ein innerhalb eines .card-columns-Containers.

Beispielcode

Hier ist ein Beispiel für a Mauerwerkslayout mit der Kartenspaltenfunktion von Bootstrap 4:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

Durch die Integration dieser Kartenspaltenfunktion können Sie ganz einfach Mauerwerkslayouts erstellen, ohne dass benutzerdefinierte CSS- oder Flexbox-Anordnungen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie erreicht man ein Mauerwerkslayout mit den Kartenspalten von Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!