web-dev-qa-db-fra.com

Ligne Bootstrap avec des 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 la même largeur - comment pourrais-je conserver la même "présentation basée sur une grille" tout en ayant toutes les boîtes alignées les unes sous les autres, au lieu de lignes parfaites.

Actuellement, TWBS placera la prochaine ligne 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, alors que c'est génial, je veux que chaque élément tombe directement sous le dernier élément ("Maçonnerie"). disposition)

htmlcsstwitter-bootstrapresponsive-designbootstrap-4
54
user3379926

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;
}
8
Steve Whitby

J'ai créé une autre extension (qui est également réactive) à la ligne d'amorçage. Vous pouvez essayer quelque chose comme ça:

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

0
Akash Yellappa

La somme du col dans le bootstrap de Twitter devrait être à tout moment de 12 ans. Cela gardera un design de grille propre:

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