Comment faire en sorte que les cartes Bootstrap 4 aient la même hauteur dans les colonnes ?

Bootstrap 4 : Cartes de même hauteur dans les colonnes

Problème :

En utilisant Bootstrap 4, les cartes dans les colonnes varient en hauteur en fonction de la longueur du texte du titre. Comment obtenir des cartes de même hauteur, même lorsque la hauteur de leur contenu diffère ?

Réponse :

Contrairement au souci, les colonnes Bootstrap 4 utilisent déjà flexbox, ce qui garantit qu’ils sont intrinsèquement de la même hauteur. Pour que les cartes occupent toute la hauteur de leurs colonnes respectives, ajoutez simplement la classe h-100 aux cartes, comme le montre l'extrait de code suivant :

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

Considérations supplémentaires :

• Évitez de faire flotter les cartes, car c'est inutile.
• Supprimez la classe .card-deck du .row ; .col-* devrait être des enfants directs de .row.

Démonstration :

Visitez https://codeply.com/go/hKhPuxoovH pour un live démonstration de la solution.

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!