Wie kann man dafür sorgen, dass ein 4-reihiger Bootstrap die verbleibende Höhe einnimmt?

Wie man in Bootstrap 4 eine Zeile dazu bringt, die verbleibende Höhe auszufüllen

Frage

Wie kann man in Bootstrap 4 dafür sorgen, dass eine Zeile die verbleibende Höhe ausfüllt verbleibende verfügbare Höhe? Das Hinzufügen von h-100 zur Zeilenklasse hinterlässt einen Leerraum am unteren Bildschirmrand.

Beispielcode

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Lösung

Um den verbleibenden Platz im zu füllen Rote Spalte mit der blauen Zeile, verwenden Sie die Bootstrap 4.1-Klasse flex-grow-1.

...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

Überarbeitet Code

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Beispiel

[Live-Demo ansehen](https://codeply.com/go/Iyjsd8djnz)

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass ein 4-reihiger Bootstrap die verbleibende Höhe einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!