Bagaimana untuk Membuat Bootstrap 4 Baris Kembangkan untuk Mengisi Baki Tinggi?

Bootstrap 4 - Mengembangkan Baris untuk Mengisi Baki Tinggi

Dalam artikel ini, kita akan meneroka cara mengembangkan baris untuk mengisi ketinggian yang tinggal menggunakan Bootstrap 4.

Masalah:

Anda mungkin menghadapi situasi di mana anda mahu satu baris diregangkan untuk menduduki baki ketinggian yang tersedia. Walaupun percubaan untuk menggunakan kelas h-100, ruang putih yang berlebihan muncul di bahagian bawah skrin.

Penyelesaian: Kelas Bootstrap 4.1 flex-grow-1

Bootstrap 4.1 memperkenalkan kelas flex-grow-1, yang membolehkan elemen berkembang untuk mengisi ruang yang tinggal dalam bekas induknya. Dengan menggunakan kelas ini, kami boleh mencapai hasil yang diingini.

Berikut ialah coretan kod yang disemak:

html,badan{ketinggian:100%;}

.bg-ungu {
latar belakang: rgb(48,0,50);
}
.bg-kelabu {
latar belakang: rgb(74,74,74);
}
.bg-biru {
latar belakang: rgb(50,101,196);
}
.bg-merah {
latar belakang: rgb(196,50,53);
}

<div>

<div>

Penjelasan:

1. Bekas Flexbox: Kami menambah lajur d-flex dan flex kelas ke lajur merah untuk mendayakan kefungsian flexbox.
2. Baris Tetap: Kami menetapkan ketinggian tetap untuk baris ungu (ROW 1) untuk mengelakkannya daripada berkembang.
3. Flex-grow: Kami menggunakan kelas flex-grow-1 pada baris biru (ROW 2), membolehkannya berkembang dan mengisi ketinggian yang tinggal.

Dengan pelarasan ini , baris biru kini akan menduduki seluruh ruang yang tersedia dalam lajur merah. Kaedah ini memastikan bahawa keseluruhan ketinggian halaman digunakan dengan cekap tanpa sebarang ruang putih tambahan di bahagian bawah.

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