基础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

在基础6中你可以通过扩展＆＃34;行扩展＆＃34;使用100％os屏幕

"MyBasket" != "My Basket"

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

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

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

Answer 2

你已经说过：

  

全宽行通常定义为12列

因此.large-6定义宽度为50％的列，.large-12将为100％。给细胞背景，你会看到。这是a codepen。

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