Zurb基金会5:网格列堆叠 [英] Zurb Foundation 5: Grid Column Stacking
本文介绍了Zurb基金会5:网格列堆叠的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这3列需要堆叠(请参阅我的基础知识移动图像)在移动/小屏幕上查看时。
在较大的屏幕中,它应该看起来像这样:
这是我目前的代码。这不是我想要的,我开始感到困惑。
< div class =row>
< div class =large-12style =background-color:#bdc3c7;>
< div class =medium-4 medium-push-8 columnsstyle =background-color:#1abc9c; border:1px solid#2c3e50;>
< p> TOP ROW< / p>
< / div>
< div class =medium-8 medium-pull-4 columnsstyle =background-color:#e74c3c; border:1px solid#2c3e50; height:250px;>
< p>中间行< / p>
< / div>
< div class =medium-4 columnsstyle =background-color:#9b59b6; border:1px solid#2c3e50;>
< p> BOTTOM< / p>
< / div>
< / div>
< / div>
解决方案
这个网格系统适用于大屏幕和小屏幕
< div class =row>
< div class =small-12 large-8 columns>< / div>
< div class =small-12 large-4 columns>< / div>
< div class =small-12 large-4 columns>< / div>
< / div>
I'm new to foundation and I only have the basic idea on how to use grids.
I have these 3 columns that need to be stacked (see "mobile" image) when viewed on mobile/small screens.
It should look something like this when in larger screens:
Here's my current code. It's not quite what I wanted, and I'm starting to get confused.
<div class="row">
<div class="large-12" style="background-color:#bdc3c7;">
<div class="medium-4 medium-push-8 columns" style="background-color: #1abc9c; border: 1px solid #2c3e50;">
<p>TOP ROW</p>
</div>
<div class="medium-8 medium-pull-4 columns" style="background-color: #e74c3c; border: 1px solid #2c3e50; height: 250px;">
<p>MIDDLE ROW</p>
</div>
<div class="medium-4 columns" style="background-color: #9b59b6; border: 1px solid #2c3e50;">
<p>BOTTOM</p>
</div>
</div>
</div>
解决方案
This grid system will work for large and small screens
<div class="row">
<div class="small-12 large-8 columns"></div>
<div class="small-12 large-4 columns"></div>
<div class="small-12 large-4 columns"></div>
</div>
这篇关于Zurb基金会5:网格列堆叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文