Wie erstelle ich mit Bootstrap 4 ein responsives Kartendeck?

Bootstrap 4 Card-Deck mit Responsive Column Count

In Bootstrap 4 können Sie mit der Card-Deck-Funktion Karten gleicher Höhe erstellen . Im Standardlayout werden jedoch unabhängig von der Breite des Ansichtsfensters vier Karten pro Zeile angezeigt. Dies ist möglicherweise nicht in allen Situationen wünschenswert, in denen Sie möglicherweise ein responsives Layout bevorzugen, das die Anzahl der Spalten basierend auf dem verfügbaren Ansichtsfensterbereich anpasst.

Um dies zu erreichen, besteht ein Ansatz darin, die Flexbox-Anzeigeeigenschaft zu verwenden und festzulegen Ein Flex-Wert, der nach einer bestimmten Anzahl von Spalten einen Zeilenumbruch in eine neue Zeile erzwingt. Dies kann mithilfe der Rasterklassen col-- implementiert werden:

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

Durch Hinzufügen dieses CSS verhält sich jede Spalte innerhalb der Zeile wie ein Flexbox-Element, sodass sie umgebrochen und angepasst werden kann ihre Breiten dynamisch basierend auf dem verfügbaren Ansichtsfensterraum.

In Bootstrap 4 Alpha 6 und höher ist Flexbox jedoch standardmäßig für diese Spalten aktiviert. Daher ist kein zusätzliches CSS notwendig, um das gewünschte Reaktionsverhalten zu erreichen. Stattdessen können Sie einfach die h-100-Klasse verwenden, um alle Karten auf die volle Höhe einzustellen.

Beispiel:

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

Diese Lösung bietet ein reaktionsfähiges Kartendeck Dadurch wird die Anzahl der Spalten basierend auf der Breite des Ansichtsfensters angepasst, um sicherzustellen, dass die Karten ausgerichtet und gleich hoch bleiben.

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