Comment créer un jeu de cartes réactif avec des largeurs de cartes variables dans Bootstrap 4 ?

Deck de cartes Bootstrap 4 avec largeurs de cartes variables

Problème :

Carte de Bootstrap 4 La fonctionnalité -deck aligne les cartes côte à côte, mais toutes les cartes ont la même largeur quelle que soit la taille de la fenêtre d'affichage. Cela peut entraîner une présentation sous-optimale sur des écrans plus étroits.

Solution :

Pour créer un jeu de cartes réactif avec différentes largeurs de cartes en fonction de la taille de la fenêtre d'affichage, vous pouvez implémenter la étapes suivantes :

1. Éliminez l'utilisation du Card-Deck :

La classe Card-Deck utilise une disposition de cellules de tableau, ce qui limite la flexibilité. Utilisez plutôt les classes de colonnes de la grille (par exemple, col-sm-4, col-lg-2) pour définir les largeurs des cartes.

2. Activer Flexbox :

Bootstrap 4 Alpha 6 et les versions ultérieures utilisent flexbox par défaut. Cependant, si vous utilisez une version antérieure, vous devrez peut-être l'activer manuellement avec le CSS suivant :

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

3. Définir la hauteur des cartes :

Pour vous assurer que toutes les cartes ont la même hauteur, ajoutez la classe h-100 à chaque carte :

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

4. Points d'arrêt réactifs :

Utilisez les classes col-- pour définir différentes largeurs de carte pour des tailles de fenêtre spécifiques (c'est-à-dire des largeurs d'écran) :

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

Exemple de code :

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

Cette solution vous permet de créer un jeu de cartes réactif qui se redimensionne en fonction de la taille de la fenêtre d'affichage, garantissant ainsi que votre mise en page s'adapte aux différents écrans.

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!