Foundation 網(wǎng)格 - 小型設(shè)備
假設(shè)我們在小型設(shè)備上有一個簡單的網(wǎng)格布局,兩列,寬度比例為 25% 和 75%。
提示: 小型設(shè)備的定義是屏幕小于 40.0625em
。
小型設(shè)備上我們使用 .small-*
類。
<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>
以下實例設(shè)置了兩個列,比例為 25% 和 75% (Foundation 是移動優(yōu)先: 如果沒有特別說明,在大型設(shè)備上會繼承 .small 類的代碼):.small
in them and use those".
實例
<div class="row">
<div class="small-3columns" style="background-color:yellow;">
<p>W3Cschool在線教程</p>
</div>
<div class="small-9columns" style="background-color:pink;">
<p>W3Cschool在線教程</p>
</div>
</div>
嘗試一下 ? | 注意: 要保證數(shù)列加起來是 12 列! |
---|
如果需要設(shè)置 33.3%/66.6% 的比例,你可以使用 .small-4
和 .small-8
:
實例
<div class="row">
<div class="small-4columns" style="background-color:yellow;">
<p>W3Cschool在線教程</p>
</div>
<div class="small-8columns" style="background-color:pink;">
<p>W3Cschool在線教程</p>
</div>
</div>
嘗試一下 ?