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 网格 - 中型设备
上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%：
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
在中型设备上我们推荐的比例为 50%/50%。
提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。
中型设备上使用 .medium-* 类。
现在我们在中型设备上添加两列：
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
以上实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):
小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50%
(.medium-6 和 .medium-6) 。
实例
<div class="row"> <div class="small-3 medium-6 columns" style="background-color:yellow;"> <p>手册网教程</p> </div> <div class="small-9 medium-6 columns" style="background-color:pink;"> <p>手册网教程</p> </div> </div>实例预览 »
| 注意: 要保证数列加起来是 12 列! |
紧在中型设备上使用
以下实例中我们指定了 .medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度):
实例
<div class="row"> <div class="medium-6 columns" style="background-color:yellow;"> <p>手册网教程</p> </div> <div class="medium-6 columns" style="background-color:pink;"> <p>手册网教程</p> </div> </div>实例预览 »
关于我们 联系我们 留言板
手册网