財団の列がその行の境界を超えるようにする方法はありますか？

Question

は私のような、2つの列と行を有するZurb財団6を使用しています：当然

<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 Sは画面ならマージン両側が存在するであろう意味75remの最大幅を有しています75remより大きい。それはいいです、私はそれを残したいです。しかし、私は右側の欄が75remの幅を通過して右に伸びるようにしたい。

つまり、左の列がmax-width: 75rem;ラッピング行内にあるように動作させたいが、右の列はmax-width: 100%;ラッピング行にあるように動作するようにしたい。

は、詳細はこちらをご覧ください：https://jsfiddle.net/u4x5owc0/11/

私は（財団と）これを達成することができます方法はありますか？

私は右の列position: absolute; width: 100%;を作ってみたが、それは全く同じように、左サイドをカバーしています。これが可能である場合、これを行う方法をtheresの場合

誰もが知っているだろうか？

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>