Wie kann man dafür sorgen, dass Bootstrap-Karten in Kartenspalten ohne Hardcodierung die gleiche Höhe haben?

So sorgen Sie dafür, dass Bootstrap-Karten in Kartenspalten die gleiche Höhe haben

Bei der Arbeit mit Bootstrap 4 müssen Sie möglicherweise alle Karten erstellen in einem Kartenspalten-Layout haben sie die gleiche Höhe. Dadurch wird ein konsistentes und optisch ansprechendes Erscheinungsbild gewährleistet.

Problemstellung

Wie können Sie mithilfe des Voorbeeld in der Bootstrap-Dokumentation erzwingen, dass alle Karten die gleiche Höhe haben, ohne dass eine Umsortierung erforderlich ist? zu hartcodiert Lösungen?

Antworten

Align-Items-Eigenschaft hinzufügen

Um eine gleiche Kartenhöhe zu erreichen, können Sie die Ausrichtungsfunktion nutzen. items-Eigenschaft für die Zeilen- oder Spaltenelemente, die die Karten enthalten. Diese Eigenschaft gibt an, wie flexible Elemente innerhalb ihres Containers vertikal ausgerichtet werden.

Option 1: Auf Zeile verwenden

Wickeln Sie Ihr Kartenspaltenelement in ein Zeilenelement und fügen Sie das hinzu align-items-stretch-Klasse darauf. Dadurch werden die Karten vertikal ausgerichtet und sichergestellt, dass sie in der Höhe an die höchste Karte angepasst werden.

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

Option 2: Auf Spalte verwenden

Alternativ können Sie hinzufügen die align-items-stretch-Klasse direkt zu jedem col-Element. Dadurch werden die Karten innerhalb jeder Spalte vertikal ausgerichtet, was effektiv zu gleichen Höhen führt.

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

UPDATE für Bootstrap 5

In Bootstrap 5 sind die align-items- Die Stretch-Klasse wurde durch die align-self-stretch-Klasse ersetzt, um eine bessere Kontrolle über einzelne Karten zu ermöglichen Ausrichtung.

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

Hinweis: Durch die Verwendung von align-items auf dem Zeilenelement werden die Ränder der Karten ausgeblendet, während dies bei Verwendung auf dem Spaltenelement nicht der Fall ist. Wählen Sie die Methode, die Ihren Designanforderungen am besten entspricht.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass Bootstrap-Karten in Kartenspalten ohne Hardcodierung die gleiche Höhe haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!