Comment créer un jeu de cartes réactif avec Bootstrap 4 ?

Deck de cartes Bootstrap 4 avec nombre de colonnes réactif

Dans Bootstrap 4, la fonction de jeu de cartes vous permet de créer des cartes de hauteur égale . Cependant, la disposition par défaut affiche quatre cartes par ligne, quelle que soit la largeur de la fenêtre. Cela peut ne pas être souhaitable dans toutes les situations, où vous préférerez peut-être une mise en page réactive qui ajuste le nombre de colonnes en fonction de l'espace disponible dans la fenêtre.

Pour y parvenir, une approche consiste à utiliser la propriété d'affichage flexbox, en spécifiant une valeur flexible qui force un retour à une nouvelle ligne après un certain nombre de colonnes. Cela peut être implémenté en utilisant les classes de grille col-- :

<code class="css">.row > div[class*="col-"] {
  display: flex;
  flex: 1 0 auto;
}</code>

En ajoutant ce CSS, chaque colonne de la ligne se comportera comme un élément flexbox, leur permettant d'être enveloppée et ajustée. leurs largeurs en fonction de l'espace d'affichage disponible.

Cependant, dans Bootstrap 4 Alpha 6 et versions ultérieures, flexbox est activé par défaut pour ces colonnes. Par conséquent, aucun CSS supplémentaire n’est nécessaire pour obtenir le comportement réactif souhaité. Au lieu de cela, vous pouvez simplement utiliser la classe h-100 pour définir toutes les cartes sur leur pleine hauteur.

Exemple :

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

Cette solution fournit un jeu de cartes réactif. qui ajuste le nombre de colonnes en fonction de la largeur de la fenêtre d'affichage, garantissant que les cartes restent alignées et de hauteur égale.

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!