html - Bootstrap 3 个相同高度的列不在断点处堆叠列？

Question

按照建议here我在行上使用了 display: table，在列上使用了 display: table-cell。

fiddle :http://jsfiddle.net/kA4yg/3/ .

它似乎有效，但在断点(在本例中，在中等设备分辨率下)下，列不会彼此堆叠(只需调整 fiddle 演示的大小)。

<div class="row row-table">
    <div class="col-md-4 col-cell" style="background-color: #8bc34a;">
         <h1>A</h1>
    </div>
    <div class="col-md-4 col-cell" style="background-color: #795548;">
        <p>b</p>
    </div>
    <div class="col-md-4 col-cell" style="background-color: #90a4ae;">
        <p>c</p>
    </div>
</div>

CSS:

.row.row-table {
    display: table;
}
.row [class*="col-"].col-cell {
    display: table-cell;
    float: none;
    vertical-align: top;
}

有什么办法可以解决这个问题，让它像“标准 Bootstrap 方式”一样工作，即 .col-lg-6 stack under large-device, .col-md -4 stack under medium-device, 等等？

Answer 1

易于使用 @media 标签，仅在您希望它看起来像这样的屏幕尺寸上应用表格显示设置，然后它会在不显示时正常运行。

@media only screen and (min-width 1200px) {
.row.row-table {
    display: table;
}
.row [class*="col-"].col-cell {
    display: table-cell;
    float: none;
    vertical-align: top;
}

}

你确实需要在 bootstrap 上检查屏幕尺寸 css 的确切数字