Comment empiler des divisions verticalement avec des hauteurs variables dans Bootstrap ?

Empilage vertical flexible de divs avec Bootstrap

Votre question recherche une solution basée sur CSS pour empiler verticalement des éléments div de différentes hauteurs tout en utilisant le framework Bootstrap. Voici une réponse complète :

Le système de grille réactif de Bootstrap donne la priorité à l'alignement horizontal et au flux de contenu. Pour obtenir un empilement vertical de divs de taille irrégulière, une approche plus flexible est nécessaire.

Envisagez d'utiliser les classes utilitaires .visible-* en conjonction avec .clearfix. Ces classes affichent ou masquent le contenu de manière conditionnelle en fonction de la taille de l'écran.

Pour chaque div que vous souhaitez empiler verticalement, ajoutez le code suivant :

<div>

Cette combinaison de classes efface efficacement les flottants pour différentes tailles d'écran, garantissant que les divs s'empilent correctement sans se chevaucher. Voici comment cela fonctionne :

• .visible-md .visible-lg masque le div de compensation sur les petits et très petits écrans.
• .visible-sm masque le div de compensation sur le support moyen, écrans grands et extra grands.

En mettant en œuvre cette solution, vous pouvez obtenir un empilage optimal de vos divs tout en conservant la compatibilité avec Bootstrap.

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!