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>

Penjelasan

Dalam semakan semula kod:

• Lajur induk (dengan latar belakang merah) mempunyai ketinggian ditetapkan kepada 100% menggunakan h-100.
• 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.
• 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.

Akibatnya, baris biru kini meluas untuk menduduki semua ruang yang tidak digunakan dalam lajur merah, mencapai kesan yang diingini mengisi ketinggian yang tinggal.

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!