Twitter Bootstrap 4コンテナーの外に画像を表示しながら、コンテナーの中にテキストが表示される

Question

私のタイトルは、この問題をより簡潔に表現する方法がわかっていないため、ポイント。私はこのマングリングのために前に謝罪します。

私がやっていることは、理想的にはブートストラップのcontainer要素によって制約されるテキストを表示することです。このテキストは、標準ブートストラップcontainer内で左揃えで実行されます。

（このテキストの右側にある）残りの部分を占有する必要があるのは、container要素から抜け出し、ブートストラップrow内の残りのビューポート全体を利用するようなイメージです。

これがBootstrapのoffset-またはpull-またはpush-クラスのジョブであるかどうかわかりません。私が必要と思うのは、より大きな（xl）スクリーンの左にある最初の4つの列のコンテンツを制約し、残りの8つの列の内容をブレークアウトして、container-fluid要素内のコンテンツのように振る舞わせるハイブリッドです。私はここに、こののJsFiddleを合理化しようとしてきました

：

私の知る限り

https://jsfiddle.net/tcq0aj3r/

Answer 1

、それに近づくための最良の方法は、疑似クラスを使用しています。これは、コンテナや列とともに調整され、それに応じて動作します。

デモ：http://www.codeply.com/go/XVVG24waWi

.right { 
    z-index: 0; 
    color: #fff; 
} 

.right:before { 
    background-image:url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop="); 
    background-repeat: no-repeat; 
    content: ''; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    width: 999em; 
    /* allow for bootstrap column padding */ 
    top: -15px; 
    left: 0; 
    bottom: -15px; 
} 

Demo

も参照してください：あなたはあなたのデザインのスクリーンショットを共有することができれば Get Two Columns with different background colours that extend to screen edge