基金会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主要是由Web开发人员完成的。 有什么优势吗？

Answer 1

在Foundation 6中，您可以使用“行扩展”来使用100％的OS屏幕

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

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

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

它等于第一个示例（未扩展）

Answer 2

您已经说过：

全宽行通常定义为12列

因此.large-6定义了50％宽度的列， .large-12将具有100％的宽度。 给单元格背景，您将看到。 这是一个codepen 。

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