twitter-bootstrap - 为什么我的列数无法在 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 显示为一条线，所有ps 看起来都向右浮动。

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

Answer 1

我使用的是TwitterBootstrap并且.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;

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

column-count 标签比浮动 div 更容易实现，主要区别在于列内容是垂直排序的，而浮动内容是水平排序的。希望这可以帮助。