ブートストラップ4の石工レイアウトはChromeとFirefoxで異なって動作します

Question

私はブートストラップ4 classes for masonry layoutと を使用していますが、私はmacのためにfirefoxとchromeでさまざまな結果を得ています。

<div class="container"> 
    <div class='card-columns'> 
    <div class='card'> 
     <h1>Something</h1> 
    </div> 
    <div class='card'> 
     <h1>Something else</h1> 
    </div> 
    </div> 
</div> 

あなた自身別のブラウザでこのreduced test caseを試すことができます。基本的に、レイアウトにいくつかの項目がある場合（私の場合2）、クロムの中で同じ列の上に重ねて積み重ねられます。

これはBootstrap 4の問題、または実際にはこれらのブラウザで複数列のレイアウトを実装していると混乱します（BSはこのレイアウトを作成するためにcolumn-count CSSプロパティを使用します）。

ffと同じプレゼンテーションをchromeで実現するにはどのようにすればよいのでしょうか？

UPD。興味がある人は、ここにブートストラップレポに関する問題のリンクがあります。私はこの質問をフォローアップして作成しました。https://github.com/twbs/bootstrap/issues/20925

Answer 1

ブートストラップ4はまだアルファベットになっていますが、

新しいBootstrap 4アルファ4を使用すると、stacking issue is resolvedが表示されます。しかし、alpha 4 introduces another issue（CSSカラムの仕組みのせいで）、カードが切り取られます。