基础6全宽行答案

【问题标题】：Foundation 6 full width row基础6全宽行
【发布时间】：2016-02-13 19:27:34
【问题描述】：

在基础 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 开发人员完成的。有什么优势吗？

【问题讨论】：

【解决方案1】：

在基础 6 中，您可以使用“行扩展”来使用 100% 操作系统屏幕

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

要在基础 6 中制作单行宽 12 列，您可以使用

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

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

【讨论】：

flexbox 上的 rem 填充呢？我们有两个columns small-6，但由于列上的填充，它们显示在彼此下方。我们不想在行上使用.collapse。
你也可以这样做：- <div class="row column expanded"> my content </div>

【解决方案2】：

你已经说过了：

全宽行通常定义为 12 列

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

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

【讨论】：

如果我做 12 和 6，那么 6 还在 DOM 中吗？
我不确定你的意思。如果您尝试在 12 列行上同时拥有 12 列单元格和 6 列单元格......没有意义，所以这当然行不通，第二个单元格会落在第一个单元格下方。但找出这些事情的最简单方法是：尝试一下，看看会发生什么。