Comment aligner les boutons Bootstrap au bas des cartes ?

Alignement des boutons Bootstrap au bas des cartes

Énoncé du problème

Lorsque vous travaillez avec le jeu de cartes et les classes de cartes de Bootstrap, un désalignement peut se produire lorsque l'on le contenu de la carte varie en taille. Ce problème est particulièrement évident lorsque vous essayez d'aligner verticalement les boutons au bas de chaque carte.

Solution

Bootstrap 4 fournit des classes de modificateurs qui offrent une solution élégante à ce défi d'alignement :

1. Ajouter d-flex au .card-body
2. Ajouter flex-column au .card-body
3. Ajouter mt-auto à l'élément .btn imbriqué dans le . card-body

Modifications du code

<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>

Conclusion

L'utilisation de ces classes de modificateurs aligne automatiquement les boutons au bas des cartes, quelles que soient les variations de contenu. Cela garantit une présentation cohérente et visuellement attrayante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!