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

【问题标题】：Why does column-count break bootstrap?为什么列数会破坏引导程序？
【发布时间】：2016-04-20 23:27:10
【问题描述】：

我想将此布局与引导程序合并：

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

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

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

（查看图片右侧）

为什么会这样？

【问题讨论】：

【解决方案1】：

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

.foo {
  …
  display: inline-block;
}

【讨论】：

【解决方案2】：

您必须以移动尺寸指定列的宽度。你有content col-lg-8 类，所以你可以添加col-xs-12 类。

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

【讨论】：