Bagaimana untuk Membuat Ketinggian Baki Isian Bootstrap 4 Baris?

Bootstrap 4: Mengisi Baki Ketinggian dalam Baris

Dalam Bootstrap 4, mencipta baris yang memenuhi sepenuhnya ruang menegak yang tinggal boleh mencabar. Secara lalai, menambah kelas h-100 pada baris tidak akan berfungsi seperti yang dimaksudkan.

Penyelesaian: Flexbox

Untuk membuat regangan baris untuk mengisi ketinggian yang tinggal, gunakan sifat Bootstrap 4.1 flexbox flex-grow-1. Kelas ini membenarkan elemen berkembang untuk mengisi baki ruang yang tersedia dalam bekasnya.

Pelaksanaan

Berikut ialah cara untuk melaksanakan penyelesaian:

1. Tambah ketinggian bekas: Tetapkan ketinggian elemen bekas (bendalir bekas) kepada 100%.
2. Lajur sarang dalam lajur flexbox: Balut lajur dalam div dengan kelas d-flex dan flex-column.
3. Gunakan flex -grow-1: Tambahkan kelas flex-grow-1 pada baris yang sepatutnya mengisi baki ketinggian.

Contoh Kod

<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>

Keputusan:

Barisan biru (ROW 2) akan kini kembangkan untuk mengisi baki ketinggian lajur merah.

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