Comment rendre les cartes Bootstrap 4 de même hauteur dans les colonnes ?

Bootstrap 4 - Créer des cartes de hauteur égale en colonnes

Problème :

Lorsque vous traitez des cartes Bootstrap, les hauteurs des cartes peut varier en fonction de la longueur des titres des cartes. Cette incohérence peut entraîner des cartes de hauteurs différentes lorsqu'elles sont disposées en colonnes.

Solution :

Utilisez Flexbox, qui est déjà utilisé dans les colonnes Bootstrap 4, pour garantir que toutes les cartes ont la même hauteur. En ajoutant la classe h-100 à chaque carte, indiquant une hauteur de 100%, les cartes rempliront automatiquement la hauteur disponible au sein de leurs colonnes respectives.

Exemple :

<code class="html"><div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <div class="card h-100">
      ...
    </div>
  </div>
  <!-- Similar cards and columns -->
</div></code>

Remarques supplémentaires :

• Flotter les cartes n'est pas nécessaire, car elles sont déjà disposées en lignes et en colonnes.
• Évitez l'imbrication .col-* cours au sein de .card-deck ; au lieu de cela, ils doivent être placés directement dans .row.

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!