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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
