Foundation6：嵌套行列中的全宽

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

我需要的“全屏幕宽度内容”面积扩大到浏览器窗口的整个宽度。如果可能的话，我希望通过框架来实现这一点。而不是使用position: absolute;解决方案。

Answer 1

我认为你需要重载容器的width声明这个部分，并强制内容比容器大。我用内联风格强制它，它在笔中工作，但你可能想要清理它并为此添加一个class，或者如果它只是一次性使用，则添加ID。

<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及其子）出来的该容器，而无需添加任何其他东西。

希望这会有所帮助。