有沒有辦法使基礎列超出其行的邊界？

Question

我使用Zurb基金會6.我有2列的行，因爲這樣的：

<div class="row"> 
    <div class="columns medium-4 left-col"> 
    Left column. 
    </div> 
    <div class="columns medium-8 right-col"> 
    Right column. Needs to reach far right hand side of screen. 
    </div> 
</div> 

自然地，基金會.row■找75rem的最大寬度，這意味着會有如果屏幕邊緣任一側大於75rem。沒關係，我想離開那個。但是，我希望右側的列一直延伸到右側，並通過75rem的寬度。

換句話說，我想嘗試讓左列在max-width: 75rem;包裝行內的行爲類似，但右列的行爲與包裝行中的max-width: 100%;行爲相似。

這裏看到更多的信息：https://jsfiddle.net/u4x5owc0/11/

有沒有一種方法，我可以做到這一點（與基金會）？

我試過製作右欄position: absolute; width: 100%;，但也只是覆蓋左側。

會有人知道這是可能的，如果有一種方法來做到這一點？

Answer 1

我不認爲基金會具有此功能，但在右列使用position: absolute; right: 0;爲我工作。

Updated fiddle

Answer 2

您應該使用.right-col{position: absolute; right: 0;}。但它不會支持小型設備。您應該使用@media查詢進行響應。請檢查DEMO它響應正常工作。

.left-col, .right-col { 
 
    height: 40vh; 
 
    color: white; 
 
    margin-bottom: 20px; 
 
} 
 

 
.left-col { 
 
    background: green; 
 
} 
 

 
.right-col { 
 
    background: red; 
 
} 
 
@media(min-width:640px){ 
 
    .right-col{ 
 
    position: absolute; 
 
    right: 0; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
<div class="columns medium-4 left-col"> 
 
</div> 
 
<div class="columns medium-8 right-col"> 
 
Needs to reach far right hand side of screen. ==> 
 
</div> 
 
</div> 
 

 
<div class="row expanded"> 
 
<div class="columns medium-4 left-col"> 
 
    Needs to remain the same width as above. 
 
</div> 
 
<div class="columns medium-8 right-col"> 
 
</div> 
 
</div>