Wie kann ich Schaltflächen am unteren Rand von Bootstrap-Karten vertikal ausrichten?

Bootstrap: Schaltflächen unten auf Karten vertikal ausrichten

Bei der Verwendung des Kartendecks und der Kartenklassen von Bootstrap stoßen Entwickler häufig auf ein Ausrichtungsproblem wenn eine Karte weniger Listenelemente enthält als andere. Dies kann zu falsch ausgerichteten Schaltflächen am unteren Rand der Karten führen.

Um dieses Problem zu beheben, sollten Sie die Verwendung der folgenden Bootstrap 4-Modifikatorklassen in Betracht ziehen:

• d-flex zu .card-body: Aktiviert die Flexbox-Funktionalität.
• flex-column zu .card-body: Ordnet die Flexbox-Elemente in einer vertikalen Spalte an.
• mt-auto zu .btn verschachtelt in .card-body: Richtet die Schaltflächen am unteren Rand der Spalte automatisch aus, indem die Eigenschaft „margin-top“ auf „auto“ gesetzt wird.

Durch Anwenden dieser Klassen passen die Schaltflächen innerhalb jeder Karte automatisch ihre vertikale Position an, um die Ausrichtung beizubehalten, unabhängig von der Anzahl der Listenelemente.

Eine vollständige Liste der in Bootstrap 4 verfügbaren Flexbox-Modifizierungsklassen finden Sie in der offiziellen Dokumentation.

Das obige ist der detaillierte Inhalt vonWie kann ich Schaltflächen am unteren Rand von Bootstrap-Karten vertikal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!