为什么我的列数不能与Chrome中的Bootstrap一起使用？

Question

我尝试使用

在列中显示多个按钮

.columnized {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

和标记

<div class="columnized col-md-6">
    <p>
        <button type="button" class="btn btn-default btn-xs">text</button>
    </p>
    <!-- ... more buttons ... -->
</div>

但整个div显示为一条线，所有p看起来都是浮动到右边。

奇怪的是，这适用于Firefox 28和甚至 Internet Explorer 10，而不是Chrome 33。

Answer 1

我正在使用 Twitter 的Bootstrap而.col-md-6已将min-height定义为1px，因此是细线。

我设法通过将min-height: initial添加到我的columnized课程来解决此问题。

希望这可以帮助其他人解决这个奇怪的问题。

Answer 2

我还发现使用

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

和

break-inside: avoid-column;
-webkit-column-break-inside: avoid;

解决了内容在列之间垂直分解的问题。

列计数标记比浮动div更容易实现，主要区别在于列内容是垂直排序的，而浮动内容是水平排序的。希望这会有所帮助。