empiler des divs de hauteurs variables en bootstrap en utilisant css

Dans ce scénario, le système de ligne de rowstrap pose un défi dans des catégories affichant de manière optimale des hauteurs de variation. Pour résoudre ce problème sans utiliser le plugin Masonry, considérez la solution CSS suivante:

1. Utilisez des classes visibles pour l'empilement réactif:
   utilisez les classes .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.

2. EXEMPLE implémentation:
   ci-dessous est une démonstration simplifiée pour deux catégories avec des hauteurs différentes:

   
       
   
           
     
    
     Notes supplémentaires:  
    
    
   . Visible-sm efface pour les petits écrans ( 
   . (> 768px) 
    
   . Visible-lg efface les flotteurs pour les grands écrans (> 1200px) 
    
    ajuster le style = "height: ...;" Attribut en adaptant à votre catégorie spécifique div Heights 
    
    Assurez-vous que la classe ClearFix est appliquée à l'extérieur des colonnes pour effacer efficacement les flotteurs 
    
    
     
    en implémentant ce technique, vous pouvez réaliser un empilement réactif des éléments div avec des hauteurs variables dans le système de la grille du bootstrap. Cette approche fournit une solution CSS pure compatible avec Bootstrap, répondant au besoin d'une visualisation de mise en page optimale.