Foundation 6在扩展行内嵌套默认宽度行答案

【问题标题】：Foundation 6 nesting default width row inside expanded rowFoundation 6在扩展行内嵌套默认宽度行
【发布时间】：2016-06-29 14:12:09
【问题描述】：

我想要一行全宽的背景，其中的内容是标准宽度行。

我试图通过创建一个扩展宽度的行、为其应用背景并在其中嵌套一个标准行来做到这一点。然而，尽管没有扩展类，但嵌套行是完全扩展的宽度。

这是我的尝试

<div class="row">
  <div class="small-2 large-4 columns"><!-- ... --></div>
  <div class="small-4 large-4 columns"><!-- ... --></div>
  <div class="small-6 large-4 columns"><!-- ... --></div>
</div>

<div class="row expanded">
  Expanded row
  <div class="row">
    <div class="large-12">Nested Row</div>
  </div>
</div>

http://codepen.io/onlyslightly/pen/beqZwo

有没有办法将标准宽度的行嵌套在扩展宽度的行中？还是有更合适的方式来执行此操作？

【问题讨论】：

抱歉，忘记了。现已添加
短裤 - 没有。您可以简单地删除 row expanded 包装器，因为它具有简单 div 的行为

标签： css zurb-foundation zurb-foundation-6

【解决方案1】：

这是 Foundation 6.2.1 中引入的一个已知问题： https://github.com/zurb/foundation-sites/issues/8886

正如您在 6.2.0 中看到的，内行可以正常工作： http://codeply.com/go/UfbFrTyThU

问题仍然存在，但您可以使用一些额外的 CSS 解决它...

.row .row {
    max-width: 75em;
}

http://codeply.com/go/vyjVAwXkn4

【讨论】：