css - bootstrap 4 行高

Question

我尝试用 bootstrap 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>

或者，对于未知数量的子列，使用flexbox，列将填充高度。查看 row 上的 d-flex flex-column，以及子列上的 h-100。

<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 d-flex flex-column h-100">
                <div class="col-md-6 col-lg-6 B h-100">
                    <div class="card bg-success h-100">

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

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

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

https://www.codeply.com/go/tgzFAH8vaW