Bagaimana untuk Mengisi Baki Ketinggian dengan Baris dalam Bootstrap 4?

Bootstrap 4: Mengisi Baki Ketinggian dengan Baris

Mencapai baris yang merentangi baki ketinggian yang tersedia dalam Bootstrap 4 boleh mencabar, tetapi ia mungkin. Mari terokai cara untuk mencapai ini menggunakan kelas flex-grow-1.

Isu Semasa dan Punca

Dalam kod yang anda berikan, anda menggunakan h-100 untuk tetapkan ketinggian kedua-dua baris dan lajur bersarang. Walau bagaimanapun, pendekatan ini mewujudkan ruang putih di bahagian bawah skrin kerana lajur bersarang (dengan baris biru) berkembang dalam lajur induk.

Penyelesaian: Menggunakan flex-grow-1

Bootstrap 4.1 memperkenalkan kelas flex-grow-1, yang memberikan saiz intrinsik 0 kepada elemen, dan kemudian membesarkannya untuk mengisi mana-mana ruang yang tinggal. Dalam kes ini, kami akan menerapkannya pada baris yang perlu diregangkan.

Kod Disemak

Berikut ialah coretan kod yang disemak:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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>
<p><strong>Penjelasan</strong></p>
<p>Dalam semakan semula kod:</p>
<ul>
<li>Lajur induk (dengan latar belakang merah) mempunyai ketinggian ditetapkan kepada 100% menggunakan h-100.</li>
<li>Lajur bersarang dibalut dalam div dengan d- kelas lentur-lajur lentur, yang menyusun anak-anaknya menjadi lajur menegak dan membolehkan mereka berkembang dalam ketinggian yang tersedia.</li>
<li>Baris kedua (dengan latar belakang biru) kini mempunyai kelas flex-grow-1 yang digunakan padanya. Ini mengarahkan baris untuk mengembangkan dan mengisi sebarang ketinggian yang tinggal dalam lajur induknya.</li>
</ul>
<p>Akibatnya, baris biru kini meluas untuk menduduki semua ruang yang tidak digunakan dalam lajur merah, mencapai kesan yang diingini mengisi ketinggian yang tinggal.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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