Wie richtet man die Schaltflächen am unteren Rand von Bootstrap-Karten aus?

Schaltflächen am unteren Rand von Bootstrap-Karten ausrichten

Wie Sie beobachtet haben, kann die Ausrichtung von Schaltflächen in Bootstrap-Karten problematisch werden, wenn sie nicht vorhanden sind Der Inhalt variiert in der Länge. So richten Sie die Schaltflächen am unteren Rand jeder Karte effektiv aus:

1. Flexbox implementieren: Fügen Sie die d-flex-Klasse zum .card-body-Element hinzu, um das Flexbox-Layout zu aktivieren.
2. Spaltenausrichtung hinzufügen: Verwenden Sie die Flex-Column-Klasse auf .card-body, um den Inhalt innerhalb der vertikal auszurichten Karte.
3. Verwenden Sie Margin Auto, um Schaltflächen auszurichten: Fügen Sie die mt-auto-Klasse zu den .btn-Elementen hinzu, die in .card-body verschachtelt sind. Dadurch werden die Schaltflächen am unteren Rand des Kartenkörpers automatisch ausgerichtet und füllen den verbleibenden Platz vertikal aus.

Ein Beispiel finden Sie im folgenden Codeausschnitt:

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

Durch Implementierung Mit diesen Schritten können Sie sicherstellen, dass alle Schaltflächen auf Ihren Bootstrap-Karten unabhängig von Inhaltsvariationen konsistent an ihren jeweiligen Unterseiten ausgerichtet sind.

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