Question

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

我试图通过创建扩展宽度行，对其应用背景并在其中嵌套标准行来尝试这样做。但是，尽管没有扩展类，嵌套行仍是完全展开的宽度。

这是我的尝试

<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

这是基础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在扩展行内嵌套默认宽度行

1 个答案: