Wie erstelle ich ein responsives Kartendeck in Bootstrap 4?

Bootstrap 4-Kartendeck mit Spaltenanzahl basierend auf dem Ansichtsfenster

Erstellen eines Kartendecks mit einer reaktionsfähigen Spaltenanzahl in Bootstrap 4 erfordert ein gewisses Verständnis des Grid-Systems und der neuen Flexbox-Funktionen, die in Bootstrap eingeführt wurden 4.

Rasterspalten verwenden

Anstatt uns auf die Card-Deck-Klasse zu verlassen, die die Table-Cell-Anzeigeeigenschaft verwendet, können wir die Grid-Spalten verwenden. Klassen, um die gewünschten Spaltenbreiten anzugeben. Dadurch haben wir mehr Kontrolle über das Layout und können ein responsives Design erstellen.

Flexbox aktivieren

In Bootstrap 4 ist Flexbox standardmäßig aktiviert. Wenn Sie jedoch eine ältere Version verwenden oder Flexbox manuell aktivieren möchten, fügen Sie die folgende CSS-Regel hinzu:

<code class="css">.row > div[class*='col-'] {
  display: flex;
}</code>

Gleiche Höhen festlegen

Um das zu erreichen Wenn Karten die gleiche Höhe haben, können wir die Fähigkeit von Flexbox nutzen, die Größe der untergeordneten Elemente automatisch an das größte Kind anzupassen. Fügen Sie einfach die h-100-Klasse zu jeder Karte hinzu, wodurch sie zu 100 % hoch und gedehnt wird, um mit der höchsten Karte in der Spalte übereinzustimmen.

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

Durch die Kombination dieser Techniken können Sie eine Bootstrap 4-Karte erstellen -Deck, das sich an unterschiedliche Ansichtsfenstergrößen anpasst und sicherstellt, dass die Karten gleich hoch bleiben und je nach verfügbarem Platz die richtige Größe haben.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein responsives Kartendeck in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!