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 显示为一条线，所有 p 看起来都向右浮动。

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

Answer 1

我使用的是 Twitter 的 Bootstrap 并且 .col-md-6 定义了 min-height 作为 1px，因此是细线。

我设法通过将 min-height: initial 添加到我的 columnized 类来解决这个问题。

希望这能帮助其他遇到这个奇怪问题的人。