Comment obtenir une hauteur de carte égale dans un jeu de cartes Bootstrap 4 avec un nombre de colonnes réactif ?

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

Scénario :

Implémentation de la fonctionnalité de jeu de cartes Bootstrap 4 pour garantir hauteur de carte égale dans différentes tailles de fenêtre.

Problème :

Par défaut, le jeu de cartes affiche quatre cartes sur une rangée, quelle que soit la taille de la fenêtre, ce qui entraîne un redimensionnement indésirable du contenu. sur des écrans plus petits.

Solution 1 : colonnes de grille (Bootstrap 4 Alpha 2)

Avant la prise en charge de Bootstrap 4 flexbox, une solution de contournement impliquait l'utilisation de

éléments avec des classes de colonnes de grille appropriées (par exemple, col-*) pour contrôler la largeur de la carte. Flexbox a ensuite été appliqué pour forcer une hauteur égale :

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

Solution 2 : Classe h-100 (Bootstrap 4 Alpha 6 et supérieur)

Avec flexbox devenant par défaut dans Bootstrap 4 Alpha 6, une solution encore plus simple a émergé :

<code class="css">.h-100 {
  height: 100%;
}</code>

Appliquez la classe h-100 aux éléments de la carte pour définir automatiquement leur hauteur à 100 %, les rendant égaux en hauteur :

<code class="html"><div class="card h-100">
  ...
</div></code>

Remarque :

Pour des mises en page plus réactives, envisagez d'utiliser des classes de points d'arrêt telles que d-*-col (par exemple, d-md-col-6) pour spécifier le nombre de colonnes à des endroits spécifiques. tailles d'écran.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn