在Bootstrap 4中使用剩余的垂直空间 [英] Use remaining vertical space with Bootstrap 4

问题描述

我想让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/

解决方案

使容器达到完整高度(例如，使用min-height:100vh)，然后使用

演示: https://www.codeply.com/go/nSK4W0APEQ

---

相关: Bootstrap 4:如何使行拉伸剩余高度?

i would like to have the id grid be using the full available vertical space

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

解决方案

Make the container full height (for example using min-height:100vh), and then use the flexbox utility classes to make the 2nd row fill the height using flex-fill. The same is done on the inner 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

---

Related: Bootstrap 4: How to make the row stretch remaining height?

这篇关于在Bootstrap 4中使用剩余的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！