Comment réparer les boîtes mal alignées dans une disposition de grille fluide Bootstrap 3 ?

Dépannage des problèmes de disposition de grille fluide Bootstrap 3

Vous rencontrez un désalignement dans une disposition de grille fluide Bootstrap 3 ? Les cases qui ne s’alignent pas sur une rangée peuvent être un problème frustrant. La cause profonde réside dans les différentes hauteurs du contenu de la boîte. Voici des méthodes efficaces pour résoudre ce problème :

1. Approche CSS (largeur de colonne CSS3)

Implémentez l'approche suivante en utilisant la largeur de colonne CSS3 : [Bootply Demo](http://bootply.com/85737)

2 . Approche « Clearfix » (réinitialisations réactives)

Utilisez l'approche « clearfix » recommandée par Bootstrap : [Bootply Demo](http://bootply.com/89910)

3. Plugin Isotope/Masonry

Pour une solution alternative, pensez à utiliser le plugin Isotope/Masonry : [Bootply Demo](http://bootply.com/61482)

Mise à jour 2017 : Solution Flexbox

Dans Bootstrap 4, flexbox propose une solution optimale :

CSS :

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

Démo : [Flexbox Equal Height](https://codepen.io/anon/pen/EbpvGe)

Ressources supplémentaires pour la hauteur variable Bootstrap Colonnes :

• [Colonnes à hauteur variable Bootstrap](https://getbootstrap.com/docs/4.0/layout/grid/#equal-width)

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!