Maison >interface Web >tutoriel CSS >Comment réparer les boîtes mal alignées dans une disposition de grille fluide Bootstrap 3 ?

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-09 16:27:11919parcourir

How to Fix Misaligned Boxes in a Bootstrap 3 Fluid Grid Layout?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn