Wie erstelle ich Bootstrap-4-Kartenspaltenkarten gleicher Höhe?

Bootstrap-Karten gleicher Höhe in Kartenspalten erstellen

In Bootstrap 4 wird die Klasse „card-columns“ verwendet, um Karten in Spalten anzuzeigen , aber die Höhe der Karten kann je nach Inhalt variieren. Um Karten mit gleicher Höhe zu erreichen, können wir eine Kombination aus CSS und Flexbox verwenden.

Lösung:

Anstatt eine feste Mindesthöhe für die Karten festzulegen, können wir verwenden das Dienstprogramm align-items-stretch für die Spaltenelemente innerhalb der Kartenspalten. Dadurch reichen die Spalten bis zur vollen Höhe der höchsten Karte.

.card-columns .col {
    align-items: stretch;
}

Implementierung:

Wickeln Sie Ihre Kartenspalten in einen Behälter und jede Karte in einen Spalte als folgt:

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
    </div>
</div>

Hinweis:

• Stellen Sie sicher, dass die Spaltenbreiten (col-lg-4 in diesem Beispiel) für alle Spalten gleich sind.
• Wenn die Karten einen Hintergrund oder Ränder aufweisen, müssen Sie möglicherweise das CSS anpassen, um sicherzustellen, dass die Ränder und Hintergründe übereinstimmen richtig.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Bootstrap-4-Kartenspaltenkarten gleicher Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!