[英]Expand container inside column to fit column height in bootstrap grid
當我設置height: 100%
或h-100
時,為什么綠色容器會在藍色列上展開?
我怎樣才能使它剛好適合柱子的剩余高度?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container" style="background-color: black"> <div class="row"> <div class="col-sm-6" style="background-color: red"> <p>Some</p> <p>More</p> <p>Content</p> <p>Here</p> </div> <div class="col-sm-6" style="background-color: blue"> <h3>Content I want to keep</h2> <section class="d-flex h-100" style="background-color: green"> <button class="btn btn-danger m-auto">Centered Button</button> </section> </div> </div> </div>
如果我理解正確,您想將綠色塊覆蓋到藍色塊中。
它無法設置高度,因為兩個塊之間有文本( two )。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container" style="background-color: black"> <div class="row"> <div class="col-sm-6" style="background-color: red"> <p>Some</p> <p>More</p> <p>Content</p> <p>Here</p> </div> <div class="col-sm-6" style="background-color: blue"> <section class="d-flex h-100" style="background-color: green"> <button class="btn btn-danger m-auto">Centered Button</button> </section> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.