为什么 column-count 打破 bootstrap？

Question

我想将此布局与 bootstrap 合并：

https://jsfiddle.net/clankill3r/j9hj8rw8/

（这里的列平衡得很好，没有间隙，这是我用 bootstrap 做不到的（也许有可能，如果可以，请告诉我）。

现在的问题是，我一开始使用 column-count，布局似乎就坏了。

.foo {
  -webkit-column-count: 3; Chrome, Safari, Opera
  -moz-column-count: 3; Firefox
  column-count: 3;
}

（检查图像的右侧）

为什么会这样？

https://jsfiddle.net/clankill3r/t528eozd/4/

Answer 1

尝试将以下内容添加到 .foo，在列计数规则之后。

.foo {
  …
  display: inline-block;
}

Answer 2

您必须以移动尺寸指定列宽。您有 content col-lg-8 class，因此您可以添加 col-xs-12 class。

<div class="content col-xs-12 col-lg-8">
    <div class="foo">
    [...]
    </div>
</div>

JSFiddle