Wie erstelle ich in Bootstrap 4 ein responsives Kartendeck mit variablen Kartenbreiten?

Bootstrap 4-Kartendeck mit variablen Kartenbreiten

Problem:

Bootstrap 4-Karte -Deck-Funktion richtet Karten nebeneinander aus, aber alle Karten haben unabhängig von der Größe des Ansichtsfensters die gleiche Breite. Dies kann auf schmaleren Bildschirmen zu einer suboptimalen Darstellung führen.

Lösung:

Um ein responsives Kartendeck mit unterschiedlichen Kartenbreiten basierend auf der Größe des Ansichtsfensters zu erstellen, können Sie Folgendes implementieren Folgende Schritte:

1. Eliminieren Sie die Verwendung von Card-Deck:

Die Card-Deck-Klasse verwendet ein Tabellen-Zellen-Layout, was die Flexibilität einschränkt. Verwenden Sie stattdessen die Rasterspaltenklassen (z. B. col-sm-4, col-lg-2), um Kartenbreiten zu definieren.

2. Flexbox aktivieren:

Bootstrap 4 Alpha 6 und spätere Versionen verwenden standardmäßig Flexbox. Wenn Sie jedoch eine frühere Version verwenden, müssen Sie diese möglicherweise manuell mit dem folgenden CSS aktivieren:

.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}

3. Kartenhöhen festlegen:

Um sicherzustellen, dass alle Karten die gleiche Höhe haben, fügen Sie jeder Karte die Klasse h-100 hinzu:

<div class="card h-100">
  ...
</div>

4. Responsive Haltepunkte:

Verwenden Sie die col---Klassen, um unterschiedliche Kartenbreiten für bestimmte Ansichtsfenstergrößen (d. h. Bildschirmbreiten) zu definieren:

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

Beispielcode:

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

Mit dieser Lösung können Sie ein reaktionsfähiges Kartendeck erstellen, dessen Größe sich an die Größe des Ansichtsfensters anpasst und so sicherstellt, dass sich Ihr Layout an verschiedene Bildschirme anpasst.

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