Heim >Web-Frontend >CSS-Tutorial >Wie kann man dafür sorgen, dass ein 4-reihiger Bootstrap die verbleibende Höhe einnimmt?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-29 10:23:11640Durchsuche

How to Make a Bootstrap 4 Row Occupy Remaining Height?

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>
<h3>Lösung</h3>
<p>Um den verbleibenden Platz im zu füllen Rote Spalte mit der blauen Zeile, verwenden Sie die Bootstrap 4.1-Klasse flex-grow-1.</p>
<pre class="brush:php;toolbar:false">...
<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>
<h3>Beispiel</h3>
<p>[Live-Demo ansehen](https://codeply.com/go/Iyjsd8djnz)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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!

bootstrap class column flex https
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Wie erreicht man eine responsive Fußzeilenausrichtung in Twitter Bootstrap?Nächster Artikel:Wie erreicht man eine responsive Fußzeilenausrichtung in Twitter Bootstrap?

In Verbindung stehende Artikel

Mehr sehen