引导4行高度

Question

我尝试有这样的事情与引导4

与同等大小的绿色行的高度和红色行

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

所有图像具有相同的大小并响应 ，但问题是我无法在绿色行和红色行的高度得到相同的大小

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>