Question

我正在使用bootstrap 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使用列计数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列的工作原理）会使卡片被裁剪。

Bootstrap 4砌体布局在Chrome和Firefox

1 个答案: