基础 6 全宽行

Question

在基础 6 中，全宽行通常定义为 12 列，但下面的代码具有相同的输出，

选项#1：

<div class="row">
  <div class="large-6 columns">
    <h1>Welcome to Foundation1</h1>
  </div>
  <div class="large-6 columns">
  </div>
</div>

选项#2：

<div class="row">
  <div class="large-6 columns">
    <h1>Welcome to Foundation1</h1>
  </div>
</div>

选项 #3：

<div class="row">
  <div class="large-12 columns">
    <h1>Welcome to Foundation1</h1>
</div>

上面的选项都做同样的事情，但我看到选项 #3 主要是由网络开发人员完成的。有什么优势吗？

Answer 1

您已经说过：

a full width row is normally defined as 12 columns

所以 .large-6 定义了一个宽度为 50% 的列，.large-12 将有 100%。给细胞背景，你会看到。这里是 a codepen.

这对于换行很重要，因此这可能是大多数开发人员选择全宽的原因。

Answer 2

在基础 6 中，您可以使用 "row expanded" 来使用 100% os 屏幕

<div class="row expanded">
    <div class="large-12 columns">
        content
    </div>
</div>

要使基础 6 中的单行宽度为 12 列，您可以使用

<div class="row column">
     my content
</div>

它等于第一个例子（没有展开）

Foundation 6 full width row