Foundation 网格 - 小型设备 - 学习 Foundation 5

Foundation 提供了 .small-* CSS 类用在屏幕小于 40.0625em 的小型设备上创建网格

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

下面的代码创建了两个列，比例为 25% 和 75%

注意： Foundation 是移动优先，如果没有特别说明，在大型设备上会继承 .small 类的代码

<div class="row">
    <div class="small-3 columns" style="background-color:yellow;">
        <p>简单教程</p>
    </div>
    <div class="small-9 columns" style="background-color:pink;">
        <p>简单教程</p>
    </div>
</div>

运行范例 »

注意: 要保证数列加起来是 12 列

如果想要设置 33.3%/66.6% 的比例，可以使用 .small-4 和 .small-8

<div class="row">
    <div class="small-4 columns" style="background-color:yellow;">
        <p>简单教程</p>
    </div>
    <div class="small-8 columns" style="background-color:pink;">
        <p>简单教程</p>
    </div>
</div>

运行范例 »