Heim > Artikel > Web-Frontend > 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!