Wie richtet man Schaltflächen am unteren Rand von Bootstrap-Karten mit unterschiedlichen Listenlängen vertikal aus?

Vertikale Ausrichtung von Schaltflächen in Bootstrap-Karten mit unterschiedlichen Listenlängen

In einem Bootstrap-Projekt kann es vorkommen, dass Sie eine Serie haben von Karten mit unterschiedlichen Listenlängen. Wenn Sie möchten, dass alle Schaltflächen in diesen Karten unten vertikal ausgerichtet sind, kann es zu Schwierigkeiten mit dem Standardstil kommen.

Um diese Ausrichtung zu erreichen, sollten Sie die folgenden Bootstrap 4-Modifikatorklassen verwenden:

• d-flex zu .card-body
• flex-column zu .card-body
• mt-auto zu .btn verschachtelt in .card-body

Diese Klassen konfigurieren den .card-body für die Verwendung des Flexbox-Layouts und legen die Schaltfläche fest (.btn), um den verbleibenden Platz in vertikaler Richtung automatisch zu belegen.

Eine praktische Demonstration finden Sie in dieser aktualisierten jsfiddle:

[jsfiddle-Link]

Zusätzliche Überlegungen:

• Sie können den Abstand anpassen, indem Sie die Ränder des ändern .btn-Elemente mit Klassen wie mr-auto oder ml-auto.
• Erwägen Sie die Verwendung der responsiven Flex-Dienstprogramme (z. B. d-block, d-md-none), wenn Sie auf bestimmte Bildschirmgrößen abzielen.

Durch die Implementierung dieser Techniken können Sie sicherstellen, dass die Schaltflächen in Ihren Bootstrap-Karten vertikal ausgerichtet sind und auf unterschiedliche Inhaltslängen reagieren.

Das obige ist der detaillierte Inhalt vonWie richtet man Schaltflächen am unteren Rand von Bootstrap-Karten mit unterschiedlichen Listenlängen vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!