Wie erreicht man gleiche Höhen für Karten in Bootstrap 4-Spalten?

Entspricht den Höhen von Bootstrap 4-Karten in Spalten

Wie bereits erwähnt, implementiert das Bootstrap 4-Framework bereits Flexbox für Spalten, was sicherstellt, dass dies der Fall ist zunächst gleich hoch. Um innerhalb dieser Spalten gleiche Kartenhöhen zu erreichen, sollten Sie die Klasse h-100 für die Karten verwenden. Diese Klasse legt die Höhe auf 100 % fest, sodass die Karten den verfügbaren Platz in jeder Spalte vollständig ausfüllen können.

Hier ist ein Beispiel für die Implementierung mit h-100:

<code class="html"><div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div></code>

Durch diese Änderung wird sichergestellt, dass die Karten in jeder Spalte unabhängig von ihrem Inhalt die gleiche Höhe haben. Es ist wichtig zu beachten, dass die Klasse .card-deck, die zuvor die Karten enthielt, nicht mehr erforderlich ist.

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