Foundation 網格– 小型設備
假設我們在小型設備上有一個簡單的網格佈局，兩列，寬度比例為25% 和75%。
提示:小型設備的定義是屏幕小於40.0625em 。
小型設備上我們使用.small-*類。
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
以下實例設置了兩個列，比例為25%和75% (Foundation是移動優先:如果沒有特別說明，在大型設備上會繼承.small類的代碼): .small in them and use those".
實例
< 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 >
< 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 >
< 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 >
嘗試一下»