Bootstrap-4: Wie man die Zeile stretch Verbleibende Höhe?

Ich versuche zu machen die container-fluid und 2. row zu Strecken, um die Verbleibende Höhe, aber ich konnte nicht einen Weg finden, es zu tun.

Ich habe versucht Einstellung der align-items/align-self zu stretch aber hat nicht funktioniert.

Unten ist mein code-Struktur:

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

Ich bin mit Bootstrap-4 A6. Könnte jemand mir empfehlen, wie die container und die Zeile stretch die Verbleibende Höhe?

InformationsquelleAutor user3130446 | 2017-02-13

  1. 20

    Bootstrap-4.1.0 hat eine utility-Klasse für flex-grow was Sie, was Sie brauchen für die Zeile, um die Verbleibende Höhe einnehmen kann. Sie können fügen Sie eine benutzerdefinierte "fill" - Klasse. Sie müssen auch sicherstellen, dass der Behälter voll ist Höhe.

    Den Namen der Klasse in der Bootstrap 4.1 ist 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

    Verwandte: Bootstrap-4 machen verschachtelten Zeile füllen Elternteil, der gemacht wurde, zu füllen viewport-Höhe mithilfe von flex-grow

    Nur eine Frage warum benötigen wir align-items-stretch align-content-stretch beide hier?
    Eigentlich weder das eine benötigt wird

    InformationsquelleAutor Zim

Schreibe einen Kommentar