Ligne de Bootstrap avec colonnes de hauteur différente

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>

Maintenant, en supposant que, content était des boîtes de hauteur différente, avec toute la même largeur - Comment pourrais-je garder la même "mise en page basée sur la grille" et pourtant avoir toutes les boîtes alignées les unes sous les autres, au lieu des lignes parfaites.

actuellement TWBS placera la ligne suivante de col-md-4 sous l'élément le plus long de la troisième rangée précédente. ainsi chaque ligne d'éléments est parfaitement aligné un nettoyage tout c'est génial je veux que chaque point de tomber directement sous le dernier élément ("la franc-Maçonnerie" mise en page)

44
demandé sur Zim 2014-03-11 00:43:50

3 réponses

C'est un populaire Bootstrap question, j'ai donc mise à jour et élargi la réponse pour Bootstrap 3 et Bootstrap 4...

Bootstrap 3" problème de hauteur " se produit parce que les colonnes utilisent float:left. Lorsqu'une colonne est "flotté" il est sorti du flux 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. Alors, quand vous avez hauteur inégale de la colonne, le bon le comportement est de les empiler du côté le plus proche.

Bootstrap uneven wrapping columns

Remarque:: Les options ci-dessous sont applicables pour enrubannage des colonnes scénarios il y a plus de 12 unités col en un seul .row. Pour les lecteurs qui ne comprennent pas pourquoi il y aurait jamais plus de 12 cols d'affilée, ou penser que la solution consiste à "utiliser séparer les lignes" devrait lire ceci premier

il y a plusieurs façons de corriger cela.. (mis à jour pour 2018)

1 - l'approche 'clearfix' ( recommandé par Bootstrap) comme ceci (nécessite une itération à chaque X colonnes). Cela forcera un wrap à chaque X nombre de colonnes...

enter image description here

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

Clearfix Démo (unique niveau)

Clearfix Démo (responsive niveaux) - eg. col-sm-6 col-md-4 col-lg-3

Il y a aussi un CSS-seulement la variation de la "clearfix'

CSS-seulement clearfix avec des tables

2 - Faire les colonnes de la même hauteur (en utilisant flexbox):

puisque le problème est causé par le différence en hauteur, vous pouvez faire des colonnes égal la hauteur de chaque rangée. Flexbox est la meilleure façon de le faire, et n'est nativement supporté dans Bootstrap 4...

enter image description here

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

démonstration de hauteur égale de la Flexbox

3-dé-flotter les colonnes en utilisant plutôt le bloc en ligne..

encore une fois, le problème de hauteur ne se produit que parce que les colonnes sont flottantes. Une autre option est de définir les colonnes à display:inline-block et float:none. Cela offre également plus de flexibilité pour l'alignement vertical. Toutefois, avec cette solution, il doit y avoir pas de code HTML espaces entre les colonnes, sinon le les éléments de bloc en ligne ont plus d'espace et s'enveloppera prématurément.

Démo en ligne bloc fix

4-CSS3 colonnes approach (Masonry / Pinterest like solution)..

ceci n'est pas natif de Bootstrap 3, mais une autre approche utilisant CSS multi-colonnes. Un inconvénient de cette approche est l'ordre des colonnes est de haut en bas au lieu de gauche à droite. Bootstrap 4 inclut ce type de solution: Bootstrap 4 Masonry démonstration de cartes.

Bootstrap 3 multi-colonnes Démo

5 - Maçonnerie JavaScript/jQuery approche

Enfin, vous pouvez utiliser un plugin comme Isotope / Maçonnerie: enter image description here

Bootstrap Maçonnerie Démo

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 en Bootstrap 4 parce qu'il utilise flexbox par défaut, donc le "problème de hauteur" n'est pas un problème. Outre, Bootstrap 4 inclut ce type de solution multi-colonnes: Bootstrap 4 de la Maçonnerie les cartes de Démonstration.

77
répondu Zim 2018-04-03 12:04:13

Pour une raison quelconque, cela a fonctionné pour moi sans le .affichage-flex classe

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
6
répondu Steve Whitby 2017-11-08 18:41:52

Le col de la somme à l'intérieur de la twitter bootsrap devrait être à chaque fois 12. Cela permettra de conserver une conception propre de la grille:

 <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>
 <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>
<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>
0
répondu Christian Michael 2014-03-10 20:51:37