响应式网格布局问题

-1

我有一个包含四个网格项目的网格布局。在桌面宽度，电网会是这样......响应式网格布局问题

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

如果浏览器被调整到〜1023px或以下，那么我会喜欢的布局，看起来像这样...

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

这很容易，但这里需要注意的是，第一个例子中的网格物体的高度需要统一，因此使用display：table-cell或min-height属性;然而，当我们触及断点时，100％栅格项目应该成为自动高度栅格项目，并且不保留显示：表格单元高度。

这甚至可以达到没有使用任何类型的JavaScript？

来源

2016-08-04 ascendantofrain

你想要这样想吗？

尝试用你自己的代码使用不同的尺寸，片段是一个'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>

来源

2016-08-04 15:00:13 Mistalis

不太......这不符合我所提到的警告。所有的div在最高分辨率下应该是相同的高度，但是当下降到1023px时，只有前三个应该是相同的高度，而第四个div可以是自动高度。 http://codepen.io/ascendantofrain/pen/jAZrba – ascendantofrain

好吧，它似乎比我想象的更棘手......也许我们应该定义[更多列布局]（http://www.wearesicc.com/quick-tips -5-列布局与 - Twitter的自举/）？ – Mistalis

我已经更新了我的答案，它不完全符合你想要的（'16,7' /'16,7' /'16,7' /'16,7' /'50'％而不是'20' /'20' /'20' /'40'％），但可能比编写新的CSS网格类更容易...：/ – Mistalis

响应式网格布局问题

回答

相关问题