Comment résoudre les problèmes d'alignement horizontal dans la grille fluide de Bootstrap 3 ?

Problèmes de mise en page dans la grille fluide de Bootstrap 3

Lorsqu'ils tentent de créer une mise en page de grille fluide à l'aide de Bootstrap 3, les utilisateurs peuvent rencontrer des problèmes d'alignement, où les cases à l'intérieur de la grille ne s'alignent pas horizontalement lorsqu'une case dépasse la hauteur des autres. Ce désalignement se produit en raison des hauteurs variables du contenu dans les colonnes.

Pour résoudre ce dilemme, trois approches principales sont viables :

1. Solution CSS uniquement via la largeur de colonne CSS3

2. Approche Clearfix

3. Plugin Isotope/Maçonnerie

Mise à jour pour 2017 et au-delà

Flexbox (Bootstrap 4 et Plus tard)

Une solution contemporaine au problème de différence de hauteur consiste à forcer les colonnes à avoir une hauteur égale à l'aide de flexbox, qui est présente par défaut dans Bootstrap 4.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Ressources supplémentaires

Visitez les liens fournis pour des démonstrations en direct des solutions et une exploration plus approfondie de ce sujet. sujet.

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!