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

Deck de cartes Bootstrap 4 avec nombre de colonnes basé sur la fenêtre d'affichage

Création d'un jeu de cartes avec un nombre de colonnes réactif dans Bootstrap 4 nécessite une certaine compréhension du système de grille et des nouvelles fonctionnalités flexbox introduites dans Bootstrap 4.

Utilisation des colonnes de grille

Au lieu de s'appuyer sur la classe card-deck, qui utilise la propriété d'affichage de cellule de tableau, nous pouvons utiliser les classes grid col-* pour spécifier les largeurs de colonnes souhaitées. Cela nous donne plus de contrôle sur la mise en page et nous permet de créer un design réactif.

Activation de Flexbox

Dans Bootstrap 4, flexbox est activé par défaut. Cependant, si vous utilisez une ancienne version ou si vous souhaitez activer manuellement flexbox, ajoutez la règle CSS suivante :

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

Définition de hauteurs égales

Pour que le cartes de hauteur égale, nous pouvons profiter de la capacité de flexbox à ajuster automatiquement la taille de ses enfants pour qu'elle corresponde à l'enfant le plus grand. Ajoutez simplement la classe h-100 à chaque carte, ce qui la rendra à 100 % de hauteur et s'étirera pour correspondre à la carte la plus haute de la colonne.

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

En combinant ces techniques, vous pouvez créer une carte Bootstrap 4 -un jeu qui s'adapte à différentes tailles de fenêtre, garantissant que les cartes restent de même hauteur et sont correctement dimensionnées en fonction de l'espace disponible.

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!