Используйте оставшееся вертикальное пространство с Bootstrap 4 - PullRequest
Новая
       30

Используйте оставшееся вертикальное пространство с Bootstrap 4

0 голосов
/ 10 октября 2018

Я хотел бы, чтобы сетка идентификаторов использовала все доступное вертикальное пространство 

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

1 Ответ

0 голосов
/ 10 октября 2018

Сделайте контейнер полной высоты (например, используя min-height:100vh), а затем используйте служебные классы flexbox *1003*, чтобы 2-й ряд заполнил высоту, используя 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: Как заставить ряд растянуть оставшуюся высоту

...