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

Question

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

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

这是我的尝试

<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

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

Answer 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

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

Foundation 6 nesting default width row inside expanded row

css

zurb-foundation

zurb-foundation-6