ブートストラップ4行の高さ

Question

Iは全ての画像は同じサイズを有する緑色行の高さに等しい大きさと赤色行

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-8 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;"> 
 
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"> 
 
    
 
    </div></div> 
 
     <div class="col-md-4 col-lg-3 G"> 
 
      <div class="row"> 
 
      <div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;"> 
 
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"> 
 
    
 
    </div></div> 
 
     <div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;"> 
 
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"> 
 
    
 
    </div></div> 
 
     <div class="col-md-12"><div class="card card-inverse" style="background-color: #333; border-color: #333;"> 
 
    <img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="Responsive image"> 
 
    
 
    </div></div> 
 
     </div> 
 
    </div> 
 
     
 
     </div> 
 
    </div>

とブートストラップ4

このようなものがあることを試みます応答があります しかし、私は緑色の行と赤い行の高さで同じサイズを得ることができません

Answer 1

サイジングユーティリティクラスを使用してください...

• h-50 =高さの50％
• h-100 =高さ100％

---

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

<div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-lg-6 B"> 
       <div class="card card-inverse card-primary"> 
        <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image"> 
       </div> 
      </div> 
      <div class="col-md-4 col-lg-3 G"> 
       <div class="row h-100"> 
        <div class="col-md-6 col-lg-6 B h-50 pb-3"> 
         <div class="card card-inverse card-success h-100"> 

         </div> 
        </div> 
        <div class="col-md-6 col-lg-6 B h-50 pb-3"> 
         <div class="card card-inverse bg-success h-100"> 

         </div> 
        </div> 
        <div class="col-md-12 h-50"> 
         <div class="card card-inverse bg-danger h-100"> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>