ネストされた列内のブートストラップ行、応答の高さ

Question

灰色のテキストは、この列の残りの部分を埋めるようにしようとしていますが、ウィンドウのサイズ（残りの100px程度）で拡大/縮小しています。灰色のテキスト領域の下部は、左の大きな画像で均一にする必要があります。

フレックスボックスソリューションがあると思っていましたが、何もうまくいかないようです。

おそらく解決策は、右の列全体からBSクラスを削除することですか？より多くのCSSでこのセクションを書くだけですか？

img {width:100%} 
 
.content-text {background:gray; margin-top:15px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container-fluid"> 
 

 
    <div class="row"> 
 

 
     <div class="col-md-6"> 
 

 
      <div class="content-box"> 
 
       <div class="item"> 
 
        <a href="#"> 
 
         <img class="content-img" src="http://c7.staticflickr.com/9/8192/8086114606_c8b71f3277_b.jpg" alt="" /> 
 
        </a> 
 
       </div> 
 
      </div> 
 

 
     </div><!-- col --> 
 

 
     <div class="col-md-6"> 
 

 
      <div class="row"> 
 

 
       <div class="col-sm-6"> 
 
        <div class="content-box"> 
 
         <div class="item"> 
 
          <a href="#"> 
 
           <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> 
 
          </a> 
 
         </div> 
 
        </div> 
 

 
       </div><!-- col --> 
 

 
       <div class="col-sm-6"> 
 

 
        <div class="content-box"> 
 
         <div class="item"> 
 
          <a href="#"> 
 
           <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> 
 
          </a> 
 
         </div> 
 
        </div> 
 

 
       </div><!-- col --> 
 

 
      </div> 
 

 
      <div class="row"> 
 

 
       <div class="col-md-6"> 
 
        <div class="content-box"> 
 
         <div class="item"> 
 
          <div class="content-text"> 
 
           <p>hello world</p> 
 
          </div><!-- content-text --> 
 
         </div><!-- item --> 
 
        </div><!-- content-box --> 
 
       </div><!-- col --> 
 

 
       <div class="col-md-6"> 
 

 
        <div class="content-box"> 
 
         <div class="item"> 
 
          <div class="content-text"> 
 
           <p>hello world</p> 
 
          </div><!-- content-text --> 
 
         </div><!-- item --> 
 
        </div><!-- content-box --> 
 

 
       </div><!-- col --> 
 

 
      </div><!-- row --> 
 

 
     </div><!-- col --> 
 

 
    </div><!-- row --> 
 

 
    <div class="row"> 
 

 
     <div class="col-md-6"> 
 

 
      <div class="placeholder-box"></div> 
 

 
     </div><!-- col --> 
 

 
     <div class="col-md-6"> 
 

 
      <div class="row"> 
 

 
       <div class="col-md-6"> 
 

 
        <div class="placeholder-box"></div> 
 

 
       </div><!-- col --> 
 

 
       <div class="col-md-6"> 
 

 
        <div class="placeholder-box"></div> 
 

 
       </div><!-- col --> 
 

 
      </div><!-- row --> 
 

 
     </div><!-- col --> 
 

 
    </div><!-- row --> 
 

 
</div><!-- container -->

Answer 1

私は確信している最高のコード、これを試してみてくださいませんが、私は今の何を考えることができます。

解決策は単純です：2小さなCOLを含んでいた（右COL内のコンテナを作るそして、最初の2つのコル同じ高さ

を作るために

• 使用のフレキシボックス - と私はここにあなたのhtmlの構造を変更していた、希望それは、IMGから区切るようにそれが見えるようにボーダートップを持ってコンテンツ・テキスト面積を行い、コンテナ
• の一つに背景を追加するには、右COLのご予定の）完全な高さ
• と間違って行くではありません。

これはすべて以下のコードでよりよく理解できます。それが助けて欲しい！

img {width:100%} 
 
.content-box {background-color: gray} 
 
.content-text {border-top:15px solid white;} 
 
.row-eq-height {display: flex; flex-wrap: wrap} 
 
.fullHeight {display: flex}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container-fluid"> 
 
    <div class="row row-eq-height"> 
 
     <div class="col-md-6"> 
 
      <div class="content-box"> 
 
       <div class="item"> 
 
        <a href="#"> 
 
         <img class="content-img" src="http://c7.staticflickr.com/9/8192/8086114606_c8b71f3277_b.jpg" alt="" /> 
 
        </a> 
 
       </div> 
 
      </div> 
 
     </div><!-- col --> 
 

 
     <div class="col-md-6 fullHeight"> 
 
      <div class="row fullHeight"> 
 
       <div class="col-sm-6 fullHeight"> 
 
        <div class="content-box fullHeight"> 
 
         <div class="item"> 
 
          <a href="#"> 
 
           <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> 
 
          </a> 
 
          \t <div class="content-text"> 
 
           <p>hello world</p> 
 
          </div><!-- content-text --> 
 
         </div> 
 
        </div> 
 
       </div><!-- col --> 
 

 
       <div class="col-sm-6 fullHeight"> 
 
        <div class="content-box fullHeight"> 
 
         <div class="item"> 
 
          <a href="#"> 
 
           <img class="content-img" src="http://c5.staticflickr.com/8/7350/14012783868_630bff261c_b.jpg" alt="" /> 
 
          </a> 
 
          \t <div class="content-text"> 
 
           <p>hello world</p> 
 
          </div><!-- content-text --> 
 
         </div> 
 
        </div> 
 
       </div><!-- col --> 
 
      </div> 
 
     </div><!-- col --> 
 
    </div><!-- row --> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="placeholder-box"></div> 
 
     </div><!-- col --> 
 
     <div class="col-md-6"> 
 
      <div class="row"> 
 
       <div class="col-md-6"> 
 
        <div class="placeholder-box"></div> 
 
       </div><!-- col --> 
 
       <div class="col-md-6"> 
 
        <div class="placeholder-box"></div> 
 
       </div><!-- col --> 
 
      </div><!-- row --> 
 
     </div><!-- col --> 
 
    </div><!-- row --> 
 
</div><!-- container -->