bootstrap 4 liên tiếp chiều cao

Question

Tôi cố gắng để có một cái gì đó như thế này với bootstrap 4

với kích thước bình đẳng trong chiều cao của hàng xanh và hàng đỏ

<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>

Tất cả các hình ảnh có cùng kích thước và đáp ứng nhưng vấn đề là tôi không thể có được kích thước bằng nhau ở độ cao của hàng màu xanh lá cây và hàng màu đỏ

Answer 1

Sử dụng các lớp tiện ích định kích thước ...

• h-50 = chiều cao 50%
• h-100 = chiều cao 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>