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

Schaltflächen an der Kartenunterseite mit Bootstrap ausrichten

Eine häufige Herausforderung bei der Arbeit mit Bootstrap-Kartendecks ist die vertikale Ausrichtung der Schaltflächen, wenn dies bei einigen Karten der Fall ist weniger Artikel. Das Problem entsteht aufgrund unterschiedlicher Listenlängen zwischen Karten.

Um dieses Problem zu beheben, können Sie die folgenden Bootstrap 4-Modifikatorklassen verwenden:

1. d-flex zu .card-body: Dadurch wird ein Flexbox-Container für den Kartenkörper erstellt.
2. flex-column zu .card-body: Setzt den Flexbox-Container auf eine vertikale Richtung.
3. mt-auto zu .btn verschachtelt in .card-body: Fügt automatischen Abstand hinzu, um die Schaltfläche am unteren Rand des Containers zu positionieren.

HTML-Beispiel:

<div class="card">
  <div class="card-body d-flex flex-column">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
    </ul>
    <button class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

Geigendemonstration:

Beziehen Sie sich für eine Live-Demonstration auf die folgende Geige: https://jsfiddle.net/IGN7K/

Durch die Implementierung dieser Klassen können Sie sicherstellen, dass die Schaltflächen am unteren Rand aller Karten unabhängig von der Inhaltslänge konsistent ausgerichtet sind.

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