Comment obtenir des hauteurs de carte égales dans les colonnes de cartes Bootstrap ?

Colonnes de cartes Bootstrap : atteindre une hauteur de carte égale

Dans Bootstrap 4, la classe card-columns permet la création d'une disposition esthétique où plusieurs cartes sont disposées dans colonnes à hauteurs variables. Cependant, cela peut conduire à des hauteurs de cartes inégales, ce qui peut ne pas être souhaitable.

Pour obtenir des hauteurs de cartes uniformes, Bootstrap propose deux solutions :

Option 1 : Définition des hauteurs sur la ligne ou Éléments de colonne

Vous pouvez aligner les hauteurs des cartes en définissant la classe utilitaire align-items-stretch sur les éléments de ligne ou de colonne dans lesquels le les cartes sont contenues. Cela étirera les cartes verticalement pour remplir l'espace disponible.

<div class="container">
  <div class="row">
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
  </div>
</div>

Option 2 : Solution Flexbox pour Bootstrap 5

Pour Bootstrap 5, le code CSS suivant peut être utilisé pour obtenir des hauteurs de carte égales dans les colonnes de cartes à l'aide des propriétés Flexbox :

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

Exemple dans CodePen

Pour une démonstration en direct de cette solution dans CodePen, veuillez visiter le lien suivant :
https://codepen.io/Kerrys7777/pen/QWgwEeG

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!