Comment obtenir un empilage optimal de divisions de taille variable dans Bootstrap sans lignes ?

Bootstrap : obtention d'un empilement optimal de divisions de taille variable

La mise en page fournie comporte plusieurs divisions de différentes hauteurs qui doivent être empilées dans un format compact. manière. Le système de lignes de Bootstrap, bien que pratique, entrave un empilement optimal dans ce scénario. Par conséquent, une solution CSS pure est recherchée pour surmonter cette limitation.

SOLUTION

Au lieu d'utiliser le système de lignes de Bootstrap, envisagez d'exploiter le ".visible-sm, .visible -md, .visible-lg" en conjonction avec la classe "clearfix". Cette stratégie efface efficacement les flottants en fonction de différentes tailles d'écran.

Mise en œuvre :

<!-- Clear floats in medium and large screens -->
<div class="clearfix visible-md visible-lg"></div>

<!-- Clear floats in small screens -->
<div class="clearfix visible-sm"></div>

Pour référence, voir la documentation Bootstrap 3.

Cette approche garantit que les divs s'empilent de manière appropriée, optimisant l'apparence générale et les fonctionnalités de la mise en page sur différentes résolutions 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!