Wie erreicht man gleiche Kartenhöhen in Bootstrap-Kartenspalten?

Bootstrap-Kartenspalten: Gleiche Kartenhöhe erreichen

In Bootstrap 4 ermöglicht die Kartenspaltenklasse die Erstellung eines ästhetisch ansprechenden Layouts, in dem mehrere Karten angeordnet sind Säulen mit variabler Höhe. Dies kann jedoch zu ungleichmäßigen Kartenhöhen führen, was möglicherweise unerwünscht ist.

Um einheitliche Kartenhöhen zu erreichen, bietet Bootstrap zwei Lösungen:

Option 1: Höhen für Zeile oder festlegen Spaltenelemente

Sie können Kartenhöhen ausrichten, indem Sie die Dienstprogrammklasse align-items-stretch entweder auf die Zeilen- oder Spaltenelemente festlegen, innerhalb derer Die Karten sind enthalten. Dadurch werden die Karten vertikal gestreckt, um den verfügbaren Platz auszufüllen.

<div class="container">
  <div class="row">
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
  </div>
</div>

Option 2: Flexbox-Lösung für Bootstrap 5

Für Bootstrap 5 kann der folgende CSS-Code kann verwendet werden, um mit Flexbox gleiche Kartenhöhen innerhalb von Kartenspalten zu erreichen Eigenschaften:

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

Beispiel in CodePen

Eine Live-Demonstration dieser Lösung in CodePen finden Sie unter folgendem Link:
https://codepen .io/Kerrys7777/pen/QWgwEeG

Das obige ist der detaillierte Inhalt vonWie erreicht man gleiche Kartenhöhen in Bootstrap-Kartenspalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!