J’ai actuellement quelque chose comme:
Content Content Content Content Content Content Content Content Content
Maintenant, en supposant que le content
était des boîtes de hauteur différente, avec la même largeur – comment pourrais-je garder la même “disposition basée sur la grid” et pourtant avoir toutes les cases alignées les unes sous les autres, plutôt que dans des lignes parfaites.
Actuellement, TWBS place la ligne suivante de col-md-4
sous l’élément le plus long de la troisième ligne précédente. Ainsi, chaque ligne d’éléments est parfaitement alignée et propre – alors que c’est génial, je souhaite que chaque élément tombe directement sous le dernier élément (Mise en page “maçonnerie”)
Ceci est une question Bootstrap populaire, donc j’ai mis à jour et développé la réponse pour Bootstrap 3 et Bootstrap 4 …
Le ” problème de hauteur ” Bootstrap 3 se produit car les colonnes utilisent float:left
. Lorsqu’une colonne est “flottée”, elle est retirée du stream normal du document. Il est décalé vers la gauche ou la droite jusqu’à ce qu’il touche le bord de sa boîte contenant. Ainsi, lorsque vous avez des hauteurs de colonne inégales , le comportement correct consiste à les emstackr du côté le plus proche.
Remarque : Les options ci-dessous sont applicables aux scénarios d’ .row
de colonnes dans lesquels il existe plus de 12 unités de .row
dans un seul .row
. Pour les lecteurs qui ne comprennent pas pourquoi il y aurait plus de 12 cols d’affilée , ou qui pensent que la solution consiste à “utiliser des lignes séparées”, il faut lire ceci en premier
Il existe plusieurs moyens de résoudre ce problème. (Mis à jour pour 2018)
1 – L’approche ‘clearfix’ ( recommandée par Bootstrap ) comme ceci (nécessite une itération toutes les X colonnes). Cela va forcer un wrap chaque X nombre de colonnes …
Content Content Content Content Content Content Content Content Content
Clearfix Demo (un seul niveau)
Clearfix Demo (niveaux réactifs) – par ex. col-sm-6 col-md-4 col-lg-3
Il existe également une variante du «clearfix» uniquement en CSS
Clearfix uniquement en CSS avec des tables
2 – Faites les colonnes à la même hauteur (en utilisant la flexbox):
Comme le problème est dû à la différence de hauteur, vous pouvez créer des colonnes de hauteur égale pour chaque ligne. Flexbox est le meilleur moyen de le faire, et est pris en charge en mode natif dans Bootstrap 4 …
.row.display-flex { display: flex; flex-wrap: wrap; } .row.display-flex > [class*='col-'] { display: flex; flex-direction: column; }
Flexbox égale hauteur Demo
3 – Décrochez les colonnes et utilisez un bloc inline à la place.
Encore une fois, le problème de hauteur se produit uniquement parce que les colonnes sont flottantes. Une autre option consiste à définir les colonnes à display:inline-block
et float:none
. Cela fournit également plus de flexibilité pour l’alignement vertical. Cependant, avec cette solution, il ne doit y avoir aucun espace HTML entre les colonnes , sinon les éléments inline-block ont un espace supplémentaire et s’enroulent prématurément.
Démo du correctif en ligne
4 – Approche par colonnes CSS3 (solution de maçonnerie / Pinterest)
Ce n’est pas natif à Bootstrap 3, mais une autre approche utilisant des multi-colonnes CSS . Un inconvénient de cette approche est que l’ordre des colonnes est de haut en bas au lieu de gauche à droite. Bootstrap 4 inclut ce type de solution : Démo Bootstrap 4 Masonry cards .
Démo Bootstrap 3 multi-colonnes
5 – JavaScript JavaScript / jQuery approche
Enfin, vous pouvez utiliser un plugin tel que Isotope / Masonry:
Démonstration de maçonnerie bootstrap
Démonstration de maçonnerie 2
Plus sur les colonnes de hauteur variable Bootstrap
Mise à jour 2018
Toutes les colonnes ont la même hauteur dans Bootstrap 4, car elles utilisent la flexbox par défaut, de sorte que le “problème de hauteur” ne pose aucun problème. De plus, Bootstrap 4 inclut ce type de solution multi-colonnes: Démo Bootstrap 4 Masonry cards .
Pour une raison quelconque, cela a fonctionné pour moi sans la classe .display-flex
.row { display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; }
La sum du col dans le programme de démarrage de twitter doit être à chaque fois.
Content Content Content Content Content Content Content Content Content