简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ディレクトリ 検索

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 网格系统

テキスト

Foundation 网格 - 大型设备

上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)：

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

在大型设备上我们推荐的比例为 33%/66%。

提示: 大型设备的屏幕尺寸定义大于 64.0625em。

大型设备上使用 .large-* 类。

现在我们在大型设备上添加两列：

<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>

解析

小型设备两个列的比例为 25%/75% (.small-3 和 .small-9)
中型设备两个列的比例为 50%/50% (.medium-6 和 .medium-6)
大型设备两个列的比例为 33%/66% (.large-4 和 .large-8)

实例

<div class="row">
  <div class="small-3 medium-6 large-4 columns" style="background-color:yellow;">
    <p>手册网教程</p>
  </div>
  <div class="small-9 medium-6 large-8 columns" style="background-color:pink;">
    <p>手册网教程</p>
  </div>
</div>

实例预览 »

注意: 要保证数列加起来是 12 列!

紧在大型设备上使用

以下实例中我们指定了 .large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度):

实例

 <div class="row">
  <div class="large-6 columns" style="background-color:yellow;">
    <p>手册网教程</p>
  </div>
  <div class="large-6 columns" style="background-color:pink;">
    <p>手册网教程</p>
  </div>
</div>

实例预览 »

关于我们联系我们留言板

手册网

前の記事：次の記事：