Comment empiler des divisions Bootstrap de différentes hauteurs à l'aide de CSS ?

Empiler des divs de différentes hauteurs dans Bootstrap à l'aide de CSS

Dans la mise en page donnée, aligner verticalement ces divs reste un défi en raison du système de grille de Bootstrap . On peut résoudre ce problème via CSS sans compter sur des plugins.

.menu-category {
  float: left;
  clear: both;
  padding: 0;
}

En appliquant ces styles, les catégories flotteront côte à côte, et avec la propriété clear, les flottants s'effaceront après chaque catégorie. Cela garantit un empilage optimal.

Pour affiner la disposition pour différentes tailles d'écran, utilisez les classes utilitaires de Bootstrap :

.visible-sm, .visible-md, .visible-lg {
  display: block;
}

.visible-sm {
  clear: both;
}

Ce CSS garantit que les catégories s'empileront sur des écrans plus petits (par exemple, smartphones) et effacez le flottant après chaque catégorie sur des écrans plus grands (par exemple, tablettes et ordinateurs de bureau).

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!