Comment empiler des divisions de hauteurs variables dans Bootstrap à l'aide de CSS ?

Empilage de divisions de hauteurs variables dans Bootstrap à l'aide de CSS

Dans ce scénario, le système de lignes de Bootstrap pose un défi en affichant de manière optimale les catégories de hauteurs variables. Pour résoudre ce problème sans utiliser le plugin masonry, envisagez la solution CSS suivante :

1. Utilisez les classes visibles pour un empilement réactif :
   Utilisez le .visible-sm , .visible-md et .visible-lg en conjonction avec clearfix. Cela garantit que les flotteurs sont effacés de manière appropriée en fonction de la taille de l'écran.

   <div class="clearfix visible-md visible-lg"></div>
   <div class="clearfix visible-sm"></div>

2. Exemple de mise en œuvre :
   Vous trouverez ci-dessous une démonstration simplifiée pour deux catégories de hauteurs différentes. :

   <div class="row">
       <div class="col-md-6">
           <div class="category-div">

3. Supplémentaire notes :

   • .visible-sm efface les flotteurs pour les petits écrans (<=768px)
   • .visible-md efface les flottants pour les écrans moyens (>768px)
   • .visible-lg efface les flotteurs pour les grands écrans (>1200px)
   • Ajustez le style="hauteur : ... ;" attribut en fonction des hauteurs de div de votre catégorie spécifique
   • Assurez-vous que la classe clearfix est appliquée en dehors des colonnes pour effacer efficacement les flotteurs

En implémentant cette technique, vous pouvez obtenir un empilement réactif d'éléments div de différentes hauteurs dans le système de grille de Bootstrap. Cette approche fournit une solution CSS pure compatible avec Bootstrap, répondant au besoin d'une visualisation de mise en page optimale.

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!