ブートストラップ、コンテナからカラムを外す

Question

2つをに1つ入れてほしい.row。左のcolにはbackground-colorがあり、これは画面の左端まで移動する必要があります。また、最初にcolにテキストがあり、通常の.containerに合わせる必要があります。 colの右にはbackground-imageがあり、画面の右端に移動する必要があります。

here is a image example of I want to achieve.これは私は現在のコード、すべての不要な要素なしである：

<div class="container-fluid"> 
    <div class="row no-gutter"> 
    <div class="col-md-6 text"> 
     <h2>Lorem ipsum dolor sit amet, consectetur elit, sed do lorem ipsum.</h2> 
    </div> <!-- close col-md-6 text --> 
    <div class="col-md-6 image" id="slided01"> 
    </div> <!-- close col-md-6 image --> 
    </div> <!-- close row --> 
</div><!-- close container-fluid --> 

上記のコードに問題のため、テキストは、画面の左側に位置合わせされていることです.container-fluid。そして、テキストを通常の.containerの幅に揃えたいと思います。

ここにはJsFiddleがあります。最初の行は私がバックグラウンドをどのようにしたいか、2行目はテキストをどのようにしたいかです。

Answer 1

container-fluidをcontainerの下に絶対配置し、CSSを使用して両方のコンテナの高さを同じに保つことができます。

.abs { 
    position: absolute; 
    top: 0; 
    left:0; 
    z-index:-1; 
    bottom:0; 
    right:0; 
    min-height:100%; 
} 

http://www.codeply.com/go/pLKx5nEZF6