Ligne Bootstrap avec des colonnes de différentes hauteurs

J'ai actuellement quelque chose comme:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

En supposant maintenant que, il y contentavait des boîtes de hauteur différente, avec toutes la même largeur - comment pourrais-je garder la même «disposition basée sur la grille» et avoir toutes les boîtes alignées les unes sous les autres, au lieu de lignes parfaites.

Actuellement, TWBS placera la ligne suivante col-md-4sous 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 - bien que ce soit génial, je veux que chaque élément tombe directement sous le dernier élément (disposition "Maçonnerie" )

C'est une question Bootstrap populaire, j'ai donc mis à jour et développé la réponse pour Bootstrap 3 et Bootstrap 4 ...

Le " problème de hauteur " de Bootstrap 3 se produit car les colonnes utilisent . Lorsqu'une colonne est «flottante», elle est retirée du flux normal du document. Il est déplacé 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 empiler sur le côté le plus proche.float:left

Remarque : les options ci-dessous sont applicables pour les scénarios d' habillage de colonne où il y a plus de 12 unités.row de colonne dans une seule . Pour les lecteurs qui ne comprennent pas pourquoi il y aurait jamais plus de 12 cols d'affilée , ou qui pensent que la solution est "d'utiliser des lignes séparées" devraient lire ceci en premier

Il existe plusieurs façons de résoudre ce problème. (Mis à jour pour 2018)

1 - L'approche 'clearfix' ( recommandée par Bootstrap ) comme celle-ci (nécessite une itération toutes les X colonnes). Cela forcera un enveloppement tous les X nombre de colonnes ...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Démo Clearfix (niveau unique)

Démo Clearfix (niveaux réactifs) - par exemple.col-sm-6 col-md-4 col-lg-3

Il existe également une variante CSS uniquement du clearfix
CSS uniquement 'clearfix' avec des tables

Étant donné que le problème est dû à la différence de hauteur, vous pouvez rendre les colonnes de hauteur égale sur chaque ligne. Flexbox est le meilleur moyen de le faire, et est pris en charge nativement dans Bootstrap 4 ...

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

Démo Flexbox à hauteur égale

Là encore, le problème de hauteur se produit uniquement parce que les colonnes sont flottantes. Une autre option consiste à définir les colonnes sur display:inline-blocket float:none. Cela offre également plus de flexibilité pour l'alignement vertical. Cependant, avec cette solution, il ne doit pas y avoir d'espaces HTML entre les colonnes , sinon les éléments de bloc en ligne ont un espace supplémentaire et s'enrouleront prématurément.

Démo de la correction de bloc en ligne

4 - Approche des colonnes CSS3 (solution de type Maçonnerie / Pinterest).

Ce n'est pas natif de 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 : Bootstrap 4 Masonry Cards Demo .

Démo Bootstrap 3 multi-colonnes

5 - Approche JavaScript / jQuery de maçonnerie

Enfin, vous souhaiterez peut-être utiliser un plugin tel que Isotope / Masonry:

Démo Maçonnerie Bootstrap Démo
Maçonnerie 2

En savoir plus sur les colonnes à hauteur variable Bootstrap

Mise à jour 2018
Toutes les colonnes ont la même hauteur dans Bootstrap 4 car il utilise flexbox par défaut, donc le "problème de hauteur" n'est pas un problème. De plus, Bootstrap 4 inclut ce type de solution multi-colonnes: Bootstrap 4 Masonry Cards Demo .

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;
}

J'ai créé une autre extension (qui est également réactive) à la ligne bootstrap. Vous pouvez essayer quelque chose comme ceci:

.row.flexRow { display: flex; flex-wrap: wrap;}