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

Bootstrap-Schaltflächen am unteren Rand von Karten ausrichten

Problembeschreibung

Beim Arbeiten mit dem Kartendeck und den Kartenklassen von Bootstrap kann es zu einer Fehlausrichtung kommen Der Inhalt der Karte variiert in der Größe. Dieses Problem tritt besonders deutlich auf, wenn Sie versuchen, die Schaltflächen unten auf jeder Karte vertikal auszurichten.

Lösung

Bootstrap 4 bietet Modifikatorklassen, die eine elegante Lösung für diese Ausrichtungsherausforderung bieten:

1. D-flex an den .card-body anhängen
2. Flex-column an ​​anhängen .card-body
3. Mt-auto an das im .card-body verschachtelte .btn-Element anhängen

Codeänderungen

<div class="card-deck">
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 1 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 1</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 2 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 2</button>
      <button type="button" class="btn btn-primary mt-auto">Button 3</button>
    </div>
  </div>
</div>

Fazit

Durch die Verwendung dieser Modifikatorklassen werden die Schaltflächen am unteren Rand der Karten automatisch ausgerichtet, unabhängig von Inhaltsvariationen. Dies sorgt für eine einheitliche und optisch ansprechende Präsentation.

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