Question

我目前正在使用Foundation 6.3.1并坚持覆盖嵌套列到完整的容器宽度。

以下是我要做的事情：

<div class="row container">
  <div class="column small-8">
    <div class="row">
      <div class="column standard">
        Standard content
      </div>
    </div>
    <div class="row expanded">
      <div class="column full">
        Full screen width content
      </div>
    </div>
    <div class="row">
      <div class="column standard">
        Standard content
      </div>
    </div>
  </div>
</div>

https://codepen.io/maca1016/pen/QgobrJ

我需要＆＃34;全屏宽度内容＆＃34;区域扩展到浏览器窗口的全宽。如果可能，我想通过框架实现这一目标。而不是使用position: absolute;来解决问题。

Answer 1

我认为您需要覆盖此部分的容器width声明，并强制内容大于其容器。我用内联样式强制它，它在笔中工作，但你可能想要清理它并为此添加class，或者如果只是一次性使用，则添加ID。 / p>

<div class="row expanded">
  <div style="width:150%!important;" class="column full">
    Full screen width content
  </div>
</div>

https://codepen.io/anon/pen/JJzJQv

Answer 2

.row.container是否有任何特殊原因包装它？我认为解决方案显然是将您需要的全部物品（.row.expanded及其子项）从该容器中取出而不制作添加其他任何东西。

希望这有帮助。

Foundation6：嵌套行列中的全宽

2 个答案: