Bootstrap 4 masonry 布局在 Chrome 和 Firefox 中的行为不同

Question

我正在使用引导程序 4 classes for masonry layout， 但我在 Firefox 和 chrome for mac 中得到了不同的结果。

<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），在 chrome 中它们在同一列中相互堆叠，在 ff 中它们分布在列中。

现在我很困惑这是 Bootstrap 4 的问题，还是这些浏览器中多列布局的实际不同实现（BS 使用 column-count css 属性来制作这种布局）。

你猜我怎样才能在 chrome 中实现与 ff 中相同的演示，以便项目分布在列中？

UPD。对于任何有兴趣的人，这里是 bootstrap repo 上问题的链接，我已经创建了以下问题：https://github.com/twbs/bootstrap/issues/20925

Answer 1

由于 Bootstrap 4 仍处于 alpha 阶段，您可能会遇到一些不稳定因素。

如果您使用较新的 Bootstrap 4 alpha 4，您将看到 stacking issue is resolved。但是，alpha 4 introduces another issue（由于 CSS 列的工作方式）导致卡片被裁剪。