Bagaimana untuk Mengisi Baki Ketinggian Bootstrap 4 Baris dengan Flexbox?

Cara Mengisi Baki Ketinggian Baris Bootstrap 4

Besarkan baris untuk mengambil ruang skrin yang tinggal boleh dicapai menggunakan Bootstrap 4 . Untuk mencapai ini, elakkan menambah h-100 pada kelas baris untuk mengelakkan ruang kosong tambahan. Sebaliknya, gunakan kelas flex-grow-1, seperti yang digambarkan di bawah:

<br>html, badan {</p>
<pre class="brush:php;toolbar:false">height: 100%;

}

.bekas -cecair {

height: 100%;

}

.baris {

justify-content-center;
height: 100%;

}

.col-4 {

background: rgb(196, 50, 53);

}

.col-8 {

background: rgb(74, 74, 74);

}

.bg-ungu {

background: rgb(48, 0, 50);

}

.bg-biru {

background: rgb(50, 101, 196);
flex-grow: 1;

}

Dalam lajur merah , sarang lajur lain dengan kotak lentur menegak menggunakan lajur d-flex dan lajur lentur. Satu baris diberikan ketinggian tetap (mis., 150px), manakala satu lagi diberikan flex-grow-1, yang memastikan ia mengembang untuk memenuhi ruang yang tinggal. Akhir sekali, masukkan kelas teks putih untuk teks putih pada latar belakang berwarna-warni.

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