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及其子）出來的該容器，而無需添加任何其他東西。

希望這會有所幫助。