Comment obtenir une hauteur de carte égale dans un jeu de cartes Bootstrap 4 avec un nombre de colonnes réactif ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-10-29 02:37:02

original

986 Les gens l'ont consulté

How to Achieve Equal Card Height in a Bootstrap 4 Card-Deck with Responsive Column Count?

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!