Question

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

它似乎可以工作，但是在断点下（在这种情况下，在中等设备分辨率下）列不会叠加在一起（只是调整小提琴演示的大小）。

<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堆栈，中型设备下的.col-md-4堆栈，依此类推？

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;
}

}

你必须检查屏幕尺寸css是否在bootstrap上的确切数字

Bootstrap 3个相同高度的列没有在断点上堆叠列？

1 个答案: