# Foundation 網格實例 以下我們收集了一些網格常用的實例。 ## 三個均等列 該實例演示了如何創建三個均等列 (33.3%/33.3%/33.3%) ，在中型和大型設備上顯示三個列，在小型設備上自動堆疊： ### 實例 ``` <div class="row"> ? <div class="medium-4 columns" style="background-color:yellow;"> ??? <p>.medium-4</p> ? </div> ? <div class="medium-4 columns" style="background-color:pink;"> ??? <p>.medium-4</p> ? </div> ? <div class="medium-4 columns" style="background-color:yellow;"> ??? <p>.medium-4</p> ? </div> </div> ``` ## 三個不均等列 該實例演示了如何創建三個不均等列 (25%/50%/25%)，在中型和大型設備上顯示三個列，在小型設備上自動堆疊： ### 實例 ``` <div class="row"> ? <div class="medium-3 columns" style="background-color:yellow;"> ??? <p>.medium-3</p> ? </div> ? <div class="medium-6 columns" style="background-color:pink;"> ??? <p>.medium-6</p> ? </div> ? <div class="medium-3 columns" style="background-color:yellow;"> ??? <p>.medium-3</p> ? </div> </div> ``` ## 兩個均等列 該實例演示了如何創建兩個均等列 (50%/50%)，在小型、中型和大型設備上列的比例始終為 50%/50%： ### 實例 ``` <div class="row"> ??<div class="small-6 columns" style="background-color:yellow;"> ????<p>.small-6</p> ??</div> ??<div class="small-6 columns" style="background-color:pink;"> ????<p>.small-6</p> ??</div> </div> ``` ## 兩個不均等列 該實例演示了如何創建兩個不均等列 (33.3%/66.6%)，在小型、中型和大型設備上列的比例始終為 33.3%/66.6%： ### 實例 ``` <div class="row"> ??<div class="small-8 columns" style="background-color:yellow;"> ????<p>.small-8</p> ??</div> ??<div class="small-4 columns" style="background-color:pink;"> ????<p>.small-4</p> ??</div> </div> ``` ## 修改列的順序 通過使用 `.small|medium|large-push-*` 和 `.small|medium|large-pull-*` 類來修改列的順序: ### 實例 ``` <div class="row"> ??<div class="small-4 small-8-push columns" style="background-color:yellow;"> ????<p>.small-4 .small-8-push</p> ??</div> ??<div class="small-8 small-4-pull columns" style="background-color:pink;"> ????<p>.small-8 .small-4-pull</p> ??</div> </div> ``` ## 嵌套列 你可以使用嵌套網格(列中插入列): ### 實例 ``` <div class="row"> ? <div class="small-8 columns">.small-8 ??? <div class="row"> ????? <div class="small-8 columns">.small-8 Nested ??????? <div class="row"> ????????? <div class="small-8 columns">.small-8 Nested Again</div> ????????? <div class="small-4 columns">.small-4</div> ??????? </div> ????? </div> ????? <div class="small-4 columns">.small-4</div> ??? </div> ? </div> ? <div class="small-4 columns">.small-4</div> </div> ``` ## 混合：手機、桌面設備 Foundation 網格系統有三個列: `.small-*` (手機), `.medium-*` (平板), 和 `.large-*` (桌面設備)。這些類可以動態組合使用，讓布局更加靈活： **提示：** 每個類都能放大，如果你希望小型和大型屏幕設備的寬度一樣可以設置指定 `.small-*`。 ### 實例 ``` <div class="row"> ??<div class="small-6 large-8 columns">.small-6 .large-8</div> ??<div class="small-6 large-4 columns">.small-6 .large-4</div> </div> <div class="row"> ??<div class="small-2 large-4 columns">.small-2 .large-2</div> ??<div class="small-4 large-4 columns">.small-4 .large-2</div> ? <div class="small-6 large-4 columns">.small-6 .large-2</div> </div> <div class="row"> ??<div class="small-3 large-5 columns">.small-3 .large-5</div> ??<div class="small-9 large-7 columns">.small-9 .large-7</div> </div> ``` ## 混合：手機、平板和桌面設備 ### 實例 ``` <div class="row"> ? <div class="medium-6 large-8 columns">.medium-6 .large-8</div> ? <div class="medium-6 large-4 columns">.medium-6 .large-4</div> </div> <div class="row"> ? <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7</div> ? <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3</div> ? <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2</div> </div> ``` ## 居中列 列居中可以使用 `.small-centered` 類。中型和大型設備可以繼承小型設備的居中，但你需要在大型設備上設置居中類`.large-centered` 。 ### 實例 ``` <div class="row"> ? <div class="small-4 small-centered columns">small-4 small-centered</div> </div> <div class="row"> ? <div class="small-6 small-centered columns">small-6 small-centered</div> </div> <div class="row"> ? <div class="small-6 large-centered columns">small-6 large-centered</div> </div> <div class="row"> ? <div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div> </div> <div class="row"> ? <div class="small-10 small-centered columns">small-10 small-centered</div> </div> ``` ## 列偏移量 可以使用 `.large-offset-*` (或 `.small-offset-*`) 類設置列向右移。 左側外邊距的列數量使用 * 號控制: ### 實例 ``` <div class="row"> ? <div class="large-1 columns">1</div> ? <div class="large-11 columns">11</div> </div> <div class="row"> ? <div class="large-1 columns">1</div> ? <div class="large-10 large-offset-1 columns">10, offset 1</div> </div> <div class="row"> ? <div class="large-1 columns">1</div> ? <div class="large-9 large-offset-2 columns">9, offset 2</div> </div> <div class="row"> ? <div class="large-1 columns">1</div> ? <div class="large-8 large-offset-3 columns">8, offset 3</div> </div> ``` ## 不完整列 如果一行中的列數量之和不是 12 , Foundation 將自動將最后一列向右浮動，并使用空白來填充剩下的列。 可選項 `.end` 類用于設置最后一列的元素向左邊浮動: ### 實例 ``` <div class="row"> ? <div class="medium-3 columns">.medium-3</div> ? <div class="medium-3 columns">.medium-3</div> ? <div class="medium-3 columns">.medium-3</div> </div> <div class="row"> ? <div class="medium-3 columns">.medium-3</div> ? <div class="medium-3 columns">.medium-3</div> ? <div class="medium-3 columns end">.medium-3 .end</div> </div> ``` ## 寬屏 網格 (`.row`) 最大尺寸（ max-width）為 62.5rem。在寬屏設備上尺寸可能大于 62.5rem, 這樣列就無法完整填充頁面，即便寬度設置為 100%。但是我們可以通過 CSS 來設置新的 max-width: ### 實例 ``` <style> .row { ??? max-width: 100%; } </style> ``` 如果你想使用默認的 max-width, 但是背景顏色需要跨域整個頁面，這時你在容器元素上使用 `.row` 類，并指定你需要的背景顏色: ### 實例 ``` <div style="background-color:coral;padding:25px;"> ? <div class="row"> ??? <div class="small-6 columns" style="background-color:yellow;">.small-6</div> ??? <div class="small-6 columns" style="background-color:pink;">.small-6</div> ? </div> </div> ```