Comment créer un jeu de cartes Bootstrap 4 réactif avec un nombre de colonnes basé sur la fenêtre d'affichage ?

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

La mise en œuvre d'un jeu de cartes dans Bootstrap 4 pour aligner des cartes de hauteur égale peut être difficile, en particulier si l'on considère la réactivité conception. Par défaut, le jeu de cartes de Bootstrap 4 répartit les cartes sur quatre colonnes, quelle que soit la taille de la fenêtre d'affichage.

Répartition du problème

Le problème se pose lorsque vous souhaitez que les cartes conservent une apparence cohérente dans différentes fenêtres d'affichage. tailles. La configuration par défaut dans Bootstrap 4 ne tient pas compte de la taille minimale de la carte et ne prend pas en compte l'impact des classes de fenêtre sur le comportement du jeu de cartes.

Solution réactive pour Bootstrap 4 version 4.1

Pour créer un jeu de cartes réactif qui ajuste le nombre de colonnes en fonction de la taille de la fenêtre d'affichage, vous pouvez tirer parti des utilitaires de visibilité introduits dans Bootstrap 4. En définissant la visibilité de colonnes particulières sur des points d'arrêt spécifiques, vous pouvez forcer un retour à la ligne et créer la mise en page souhaitée.

Solution Flexbox pour les versions antérieures de Bootstrap 4

Pour les versions Bootstrap 4 antérieures à 4.1, vous pouvez utiliser les classes grid col-* pour contrôler les largeurs de carte. Cependant, cela nécessite un extrait de code CSS supplémentaire pour activer flexbox et garantir que les colonnes ont la même hauteur.

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

Deck de cartes réactif pleine hauteur (Bootstrap 4 Alpha 6 et versions ultérieures)

Bootstrap 4 Alpha 6 et les versions ultérieures ont flexbox activé par défaut. Par conséquent, vous pouvez utiliser la classe h-100 pour définir les cartes sur toute leur hauteur. Cette approche élimine le besoin de CSS supplémentaire pour gérer le comportement de la flexbox.

En résumé, en employant les techniques appropriées basées sur la version Bootstrap 4 que vous utilisez, vous pouvez obtenir un jeu de cartes réactif avec le jeu de cartes souhaité. compte de colonnes et conserve une apparence cohérente dans différentes tailles de fenêtre.

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!