Foundation 基础
Foundation 教程
Foundation 安装
Foundation 按钮
Foundation 按钮组
Foundation 标签
Foundation 表单
Foundation 表格
Foundation 侧边栏
Foundation 顶部导航栏
Foundation 分页
Foundation 滑动导航
Foundation 滑块
Foundation 价格表
Foundation 进度条
Foundation 均衡器(Equalizer)
Foundation 开关
Foundation 列表
Foundation 麦哲伦（Magellan）导航
Foundation Joyride
Foundation 面板
Foundation 模态框
Foundation 输入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 图标
Foundation 图片
Foundation 文本
Foundation 下拉菜单
Foundation 选项卡
Foundation 折叠列表
Foundation 手册
Foundation CSS 参考手册
Foundation CSS 可见性
Foundation 图标参考手册
Foundation 网格
Foundation 块状网格
Foundation 网格 - 大型设备
Foundation 网格 - 水平堆叠
Foundation 网格 - 小型设备
Foundation 网格 - 中型设备
Foundation 网格实例
Foundation 网格系统
©
本文档使用 PHP中文网手册 发布
文字
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>
实例预览 »
关于我们 联系我们 留言板
手册网