css - 为什么列数会中断 Bootstrap ？

Question

我想将这个布局与 bootstrap 合并:

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

(这里的列平衡得很好，没有间隙，这是我无法用 bootstrap 完成的(也许有可能，如果可以，请告诉我)。

现在的问题是，一旦我开始使用列数，布局似乎就会中断。

.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;
}