Ligne bootstrap avec colonnes de hauteur différente

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.

Bootstrap colonnes inégales d'emballage

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 …

entrer la description de l'image ici

 
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

entrer la description de l'image ici

 .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: entrer la description de l'image ici

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