Zurb Foundation 6：嵌套扩展网格，无填充

Question

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

无填充，宽度：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?

Answer 1

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

来自基金会：

  

.collapse类可以删除列装订线（填充）。

source

你有任何疑问吗？

Answer 2

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

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