网格 - Materialize 中文

我们使用的是标准的 12 列流响应式网格系统。网格可以帮助你以有序、轻松的方式布局页面。

容器类严格来说不是网格的一部分，但在布局内容方面非常重要。它允许你将页面内容居中。container 类被设置为窗口宽度的 ~70%。它可以帮助你将页面内容居中并包含起来。我们使用容器来包含我们的正文内容。

演示

尝试下面的按钮，看看没有容器的页面是什么样子。

关闭容器

要添加容器，只需将你的内容放入带有 <div> 标记和 container 类的 container 类中。以下是如何设置页面的示例。


    <body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
    </body>

看看本节，快速了解网格的工作原理！

12 列

我们的标准网格有 12 列。无论浏览器的大小如何，这些列的宽度始终相等。

要了解网格如何在 HTML 中使用，请查看下面的代码，它将产生与上面类似的结果。


    <div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>

注意：现在，只需知道 s1 代表 small-1，用普通话来说就是“小屏幕上的 1 列”。

列位于行中

在创建布局时，请记住所有列都必须包含在行中，并且你必须向内部 div 添加 col 类，才能将它们变成列

此 div 在所有屏幕尺寸上都是 12 列宽

6 列（一半）


    <div class="row">
      <div class="col s12">This div is 12-columns wide on all screen sizes</div>
      <div class="col s6">6-columns (one-half)</div>
      <div class="col s6">6-columns (one-half)</div>
    </div>

要进行偏移，只需将 offset-s2 添加到类中，其中 s 表示屏幕类前缀（s = 小，m = 中，l = 大），后面的数字是要偏移的列数。

此 div 在所有屏幕尺寸上都是 12 列宽

6 列（偏移 6 列）


    <div class="row">
      <div class="col s12"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
      <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>
    </div>

您可以通过推入和拉出轻松更改列的顺序。只需将 push-s2 或 pull-s2 添加到类中，其中 s 表示屏幕类前缀（s = 小，m = 中，l = 大），后面的数字是要推入或拉出的列数。

此 div 为 7 列宽，向右推入 5 列。

5 列宽，向左拉出 7 列。


    <div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>

在此，我们将向您展示如何使用我们的网格系统创建一些常用的布局。希望这些内容能让您更轻松地布局元素。为了使这些演示保持简单，此处的内容不会响应。

部分

部分类用于简单的顶部和底部填充。只需将 section 类添加到包含大量内容块的 div 中。

分隔线

分隔线是 1 像素线，有助于分解您的内容。只需将 divider 添加到内容之间的 div 中。

示例部分和分隔线

部分 1

内容

部分 2

内容

部分 3

内容


  <div class="divider"></div>
  <div class="section">
    <h5>Section 1</h5>
    <p>Stuff</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h5>Section 2</h5>
    <p>Stuff</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h5>Section 3</h5>
    <p>Stuff</p>
  </div>

示例促销表

如果我们想要 3 个大小相等的 div，则将 div 定义为 4 列宽，因为 4+4+4 很好的加起来为 12。在这些 div 中，我们可以放置我们的内容。以我们的首页内容为例。为了本示例，我们对其进行了轻微修改。


    <div class="row">

      <div class="col s4">
        <!-- Promo Content 1 goes here -->
      </div>
      <div class="col s4">
        <!-- Promo Content 2 goes here -->
      </div>
      <div class="col s4">
        <!-- Promo Content 3 goes here -->
      </div>

    </div>

示例侧边导航布局

您可以看到使用网格系统创建布局是多么容易。只需记住，要确保您的列数加起来为 12，以获得均匀的布局。


    <!-- Navbar goes here -->

    <!-- Page Layout here -->
    <div class="row">

      <div class="col s3">
        <!-- Grey navigation panel -->
      </div>

      <div class="col s9">
        <!-- Teal page content  -->
      </div>

    </div>

上面我们向您展示了如何使用我们的网格系统布局元素。现在我们向您展示如何设计您的布局，以便它们在所有屏幕尺寸上看起来都很棒。

屏幕尺寸

	移动设备 <= 600px	平板电脑 > 600px	台式机 > 992px	大台式机 > 1200px
类前缀	`.s`	`.m`	`.l`	`.xl`
容器宽度	90%	85%	70%	70%
列数	12	12	12	12

添加响应性

在前面的示例中，我们仅使用 "col s12" 为小屏幕定义了大小。如果我们想要一个固定的布局，这是可以的，因为规则会向上传播。仅通过说 s12，我们实际上是在说 "col s12 m12 l12"。但是通过明确定义大小，我们可以使我们的网站更具响应性。

我始终是全宽的 (col s12)

我在移动设备上是全宽的 (col s12 m6)


    <div class="row">
      <div class="grid-example col s12"><span class="flow-text">I am always full-width (col s12)</span></div>
      <div class="grid-example col s12 m6"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
    </div>

响应式侧边导航布局

在下面的示例中，我们采用了上面相同的布局，但通过定义 div 在每个屏幕尺寸上应占据多少列来使其具有响应性。尝试调整浏览器的大小，并观察下面的布局变化。


    <!-- Navbar goes here -->

    <!-- Page Layout here -->
    <div class="row">

      <div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
        <!-- Grey navigation panel

              This content will be:
          3-columns-wide on large screens,
          4-columns-wide on medium screens,
          12-columns-wide on small screens  -->

      </div>

      <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
        <!-- Teal page content

              This content will be:
          9-columns-wide on large screens,
          8-columns-wide on medium screens,
          12-columns-wide on small screens  -->

      </div>

    </div>