Comment créer des cartes de même hauteur dans les colonnes Bootstrap 4 ?

Bootstrap 4 Cartes de hauteur égale dans les colonnes

Problème

De nombreux développeurs utilisant Bootstrap 4 rencontrent un problème courant : les cartes dans les colonnes varient souvent en hauteur , principalement en raison de différences de contenu ou de taille de titre. Cela peut créer une disposition inégale et visuellement peu attrayante.

Solution

Pour obtenir des cartes de hauteur égale dans les colonnes Bootstrap 4, utilisez la classe h-100 pour définir la hauteur. des cartes à 100% de la colonne contenant. Cela garantit que les cartes occupent toute la hauteur de l'espace disponible.

Mise en œuvre

Marquage HTML :

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

Remarque :

• Les classes .col-* doivent être appliquées directement au div .card, et non à un élément intermédiaire comme . card-deck.
• L'utilisation de float sur les cartes n'est pas nécessaire.
• La classe h-100 peut être appliquée à toutes les cartes dans une colonne ou de manière sélective sur des cartes spécifiques pour des ajustements de hauteur ciblés.

Exemple de code (Codeply) :

https://codeply.com/go/ hKhPuxoovH

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!