Bootstrap 4: Как сделать строку растянуть оставшуюся высоту?

Я пытаюсь сделать container-fluid и 2 row растянуть на оставшиеся высоты, но я не мог найти способ сделать это.

Я попытался установить align-items/align-self to stretch но не работает.

ниже мой код:

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row"> <!-- I want this row height to filled the remaining height -->
        <widgets [widgets]="widgets" class="hing"></widgets>
        <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
            <template row-host></template>
        </div>
    </div>
</div>

я использую Bootstrap 4 A6. Может ли кто-нибудь предложить мне, как сделать контейнер и ряд, чтобы растянуть оставшуюся высоту?

13
bootstrap-4 flexbox twitter-bootstrap twitter-bootstrap-4

1 ответов

Bootstrap 4.1.0 имеет класс утилиты для flex-grow что это то, что вам нужно для строки, чтобы заполнить оставшиеся высота. Для этого можно добавить пользовательский класс "fill". Вы также должны убедиться, что контейнер полный рост.

имя класса в Bootstrap 4.1 -flex-grow-1

html,body{
    height:100%;
}

.flex-fill {
    flex:1;
}

<div class="container-fluid d-flex h-100 flex-column">
    <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row bg-light flex-fill d-flex justify-content-start">
        <!-- I want this row height to filled the remaining height -->
        <div class="col portlet-container portlet-dropzone">
            <!-- if row is not the right to stretch the remaining height, this column also fine -->
            Content
        </div>
    </div>
</div>

https://www.codeply.com/go/kIivt8N1rn

по теме: Bootstrap 4 Сделайте вложенный родитель заполнения строки, который был сделан для заполнения высоты окна просмотра использование flex-grow

12