Wie erstelle ich mit dem Flexbox Grid von Bootstrap 4 ein Mauerwerkslayout?

So erstellen Sie ein Mauerwerkslayout in Bootstrap 4 mit Flexbox Grid

In Bootstrap 4 können Sie mithilfe der Flexbox ein Mauerwerkssäulenlayout erstellen Raster durch Nutzung der Kartenspalten Funktion.

Lösung:

Verpacken Sie Ihre Kartenelemente in einen .card-columns-Container, wie unten gezeigt:

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

Erläuterung:

• Die .card-columns-Klasse verwendet CSS-Spalten, um Ordnen Sie Ihre Karten von oben nach unten und von links nach rechts an.
• Die Karten werden inline-blockiert angezeigt, um zu verhindern, dass sie spaltenübergreifend umgebrochen werden.
• Denn columns-break-inside:void ist noch nicht vorhanden Wenn Sie eine kugelsichere Lösung verwenden, kann es immer noch zu inkonsistenten Spalten kommen Höhen.

Beispiel:

Bedenken Sie den folgenden HTML-Code:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-1.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-2.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-3.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-with-long-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-4.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-with-even-more-text">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

Dies führt zu einem Mauerwerkslayout mit den Karten Sie ordnen sich anhand ihrer Inhaltshöhe an und schaffen so ein optisch ansprechendes und dynamisches Raster.

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