web-dev-qa-db-ja.com

Bootstrap 4オーダーメイソンリーのような縦型カードを縦型ではなく横型に並べる

.card-columnsでラップされている場合、左から右にBootstrap 4カードを注文できますか？

上から下（デフォルト）：

1 3 5
2 4 6

左から右へ：

1 2 3
4 5 6

高さが変化するため、石積みのようなグリッドを使用する必要があります。

htmlcsstwitter-bootstraptwitter-bootstrap-4
16
Marvin

CSSの列の順序は上から下、次に左から右であるため、レンダリングされる列の順序は次のようになります。

1  3  5
2  4  6

CSS列の順序を変更する方法はありません。石積みのような別のソリューションを使用することをお勧めします。 https://github.com/twbs/bootstrap/issues/17882

また、 flexboxは役に立たない を有効にすると、Bootstrap card-deckは石工効果にCSS列（flexboxではない）を使用するためです。ただし、同じ高さのカードにはcard-deckとflexboxを使用できます。 http://www.codeply.com/go/YFFFWHVoRB

別のオプションは、card-deckの代わりに flexboxと共にグリッド を使用することです：

新しいd-flexクラスを使用して 余分なCSSを削除 にできます。

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

関連： カード列を水平に並べるにはどうすればよいですか？

10
Zim