为什么列数会破坏引导程序？

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。

wkhtmltopdf -V

Answer 2

您必须以移动设备尺寸指定列的宽度。您有content col-lg-8个班级，因此您可以添加col-xs-12班级。

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

JSFiddle