私はブートストラップ4 classes for masonry layoutと を使用していますが、私はmacのためにfirefoxとchromeでさまざまな結果を得ています。ブートストラップ4の石工レイアウトはChromeとFirefoxで異なって動作します
<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
カード列divに「display:inline-block;」を追加することで切り抜きが修正されます – semaj0
「.card-columns .card {display:inline-block; width:100%;}」スタッキングChromeの問題が戻ってきました。私はこの問題が解決されているのを見ることができません。私はBootstrap3に(手動で)適用できる解決策も探しています。例:https://www.bootply.com/W5cQ4ECU00 –