我想让 id 网格使用完整的可用垂直空间
<div class="container fluid">
<div class="row mb-2">
<div class="col">
<h2><i class="fas fa-map-marker-alt"></i> Test</h2>
</div>
<div class="col">
<ul class="nav justify-content-end nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">2018</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2019</a>
</li>
</ul>
</div>
</div>
<div class="row" >
<div class="col">
<div id="Grid"></div>
</div>
</div>
</div>
https://jsfiddle.net/erhansogood/aq9Laaew/247411/ https://jsfiddle.net/erhansogood/aq9Laaew/247411/
使容器达到全高（例如使用min-height:100vh），然后使用弹性盒实用程序类 http://getbootstrap.com/docs/4.1/utilities/flex/使第二行填充高度使用flex-fill。内部也做同样的事情col.
<div class="container fluid d-flex flex-column mvh-100">
<div class="row mb-2">
<div class="col">
<h2><i class="fas fa-map-marker-alt"></i> Test</h2>
</div>
<div class="col">
<ul class="nav justify-content-end nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">2018</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2019</a>
</li>
</ul>
</div>
</div>
<div class="row flex-fill flex-column">
<div class="col flex-fill">
<div id="Grid" class="h-100">
Grid
</div>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/nSK4W0APEQ https://www.codeply.com/go/nSK4W0APEQ
有关的：Bootstrap 4：如何使行拉伸剩余高度？ https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height/42195475#42195475
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
