Bagaimana untuk Membuat Bootstrap 4 Baris Menduduki Baki Ketinggian?

Cara Membuat Pengisian Baris Ketinggian Baki dalam Bootstrap 4

Soalan

Dalam Bootstrap 4, bagaimana anda boleh membuat regangan baris untuk menduduki baki ketinggian yang tersedia? Menambah h-100 pada kelas baris meninggalkan ruang putih di bahagian bawah skrin.

Kod Contoh

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

Penyelesaian

Untuk mengisi ruang yang tinggal dalam lajur merah dengan baris biru, gunakan kelas Bootstrap 4.1 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>
...

Kod Disemak

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

Contoh

[Lihat demo langsung](https://codeply.com/go/Iyjsd8djnz )

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bootstrap 4 Baris Menduduki Baki Ketinggian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!