在 Bootstrap 4 中使用剩余的垂直空间

Question

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

Answer 1

使容器全高（例如使用min-height:100vh），然后使用flexbox utility classes 使第二行使用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>

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

---

相关：Bootstrap 4: How to make the row stretch remaining height?