Foundation 网格实例-开发文档-JsSaaS开发平台

系统、网站、API站点，简单高效开发

Foundation 教程

Foundation5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation 麦哲伦（Magellan）导航 Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器(Equalizer)

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

Foundation 图标参考手册 Foundation CSS 参考手册 Foundation CSS 可见性

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:

实例

如果你想使用默认的 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>