Zurb Foundation 6：无填充的嵌套扩展网格答案

【问题标题】：Zurb Foundation 6: nested expanded grid with no-paddingZurb Foundation 6：无填充的嵌套扩展网格
【发布时间】：2016-03-11 20:39:12
【问题描述】：

我尝试使用 Zurb Foundation 6 创建一个类似这种形状的网格形式。

它具有无填充、width:100%（适用于所有尺寸）和响应式

我尝试这样做：

<div class="expanded  row" style="background:yellow;">
        <div class="small-10 columns" style="background:grey;">
          <div class="row" style="background:yellow;">
            <div class="small-6 columns" style="background:blue;">6 Nested</div>
            <div class="small-6 columns" style="background:blue;">6 Nested</div>
          </div>
        </div>
        <div class="small-2 columns" style="background:grey;">
          <div class="row" style="background:yellow;">
            <div class="small-12 columns" style="background:blue;">12 Nested</div>
            <div class="small-12 columns" style="background:blue;">12 Nested</div>
          </div>
        </div>
</div>

这是结果：

你可以看到它和我想要的很相似，但是嵌套的行有左右填充（我用形状开始销售它们）

我怎样才能删除该填充（使用基础标准）？

我也试过collapse

编辑：

`padding:0`  in `<div class="small-2 columns"` can solve problem but I want to know whats is 'Zurb Foundation' solution?

【问题讨论】：

你能创建一个fiddle 来复制你的问题吗？

标签： css html grid zurb-foundation

【解决方案1】：

填充来自列类。要删除它，请使用折叠。

来自基金会：

.collapse 类可让您删除列间距（填充）。

source

你有什么问题吗？

【讨论】：

【解决方案2】：

我通过添加以下内容解决了扩展行的嵌套填充问题：

.row.expanded .row {
  @include grid-row-nest($grid-column-gutter);
}

【讨论】：