响应式网格布局问题

Question

我有一个包含四个网格项目的网格布局。在桌面宽度下，网格会是这样的......

| 20% |     |     |       |
|     |     | 20% |       |
|     | 20% |     |  40%  |

如果浏览器的大小调整到 ~1023px 或以下，那么我希望布局看起来像这样......

|       |  33%   |        |
|       |        |  33%   |
|  33%  |        |        |
---------------------------
|           100%          |

这一切都很简单，但需要注意的是，第一个示例中网格项的高度需要统一，因此使用 display: table-cell 或 min-height 属性；但是，当我们遇到断点时，100% 的网格项应该变成一个自动高度的网格项，而不是保留显示：表格单元格高度。

这甚至可以在不使用任何类型的 javascript 的情况下实现吗？

Answer 1

你想要这样的想法吗？

在你自己的代码中尝试不同尺寸，sn-p 是一个'XS'屏幕。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:red;">
    Div1
</div>
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:blue;">
    Div2
</div>    
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:yellow;">
    Div3
</div>
<div class="col-xs-12 col-sm-12 col-md-6" style="background-color:pink;">
    Div4
</div>