web-dev-qa-db-fra.com

Bootstrap 4 cartes colonnes de type maçonnerie horizontales au lieu de verticales

Est-il possible de commander Bootstrap 4 cartes de gauche à droite lorsque enveloppé dans .card-columns?

De haut en bas (par défaut):

1 3 5
2 4 6

De gauche à droite:

1 2 3
4 5 6

En raison de la hauteur variable, il est nécessaire pour moi d'utiliser une grille de type maçonnerie.

htmlcsstwitter-bootstraptwitter-bootstrap-4
16
Marvin

L'ordre des colonnes CSS est de haut en bas, puis de gauche à droite afin que l'ordre des colonnes rendues soit ..

1  3  5
2  4  6

Il n'y a aucun moyen de modifier l'ordre des colonnes CSS. Il est suggéré d'utiliser une autre solution comme la maçonnerie. https://github.com/twbs/bootstrap/issues/17882

En outre, l'activation de flexbox n'aidera pas car Bootstrap card-deck utilise des colonnes CSS (pas flexbox) pour l'effet de maçonnerie. Vous pouvez cependant utiliser le card-deck et flexbox pour les cartes de hauteur égale: http://www.codeply.com/go/YFFFWHVoRB

Une autre option consiste à utiliser le grille avec flexbox au lieu du card-deck:

Vous pouvez utiliser le nouveau d-flex classe à éliminer le CSS supplémentaire :

<div class="col-sm-4 d-flex pb-3">
    <div class="card card-block">
        Card. I'm just a simple card-block.
    </div>
</div>

Connexes: Comment puis-je faire un ordre horizontal des colonnes de cartes?

10
Zim