Comment aligner les boutons au bas des cartes Bootstrap avec différentes longueurs de contenu ?

Alignement des boutons en bas de la carte à l'aide de Bootstrap

Un défi courant rencontré lors du travail avec les jeux de cartes Bootstrap consiste à aligner les boutons verticalement lorsque certaines cartes ont moins d'articles. Le problème survient en raison des différences dans la longueur des listes entre les cartes.

Pour résoudre ce problème, vous pouvez utiliser les classes de modificateurs Bootstrap 4 suivantes :

1. d-flex to .card-body : ceci établit un conteneur flexbox pour le corps de la carte.
2. flex-column to .card-body : définit le conteneur flexbox dans une direction verticale.
3. mt-auto à .btn imbriqué dans .card-body : ajoute un espacement automatique pour positionner le bouton en bas du conteneur.

Exemple HTML :

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

Démonstration de violon :

Référez-vous au violon suivant pour une démonstration en direct : https://jsfiddle.net/IGN7K/

En implémentant ces classes, vous pouvez garantir que les boutons sont systématiquement alignés au bas de toutes les cartes, quelle que soit la longueur de leur contenu.

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!