Bagaimanakah Saya Boleh Membuat Reka Letak Dua Lajur Tinggi Penuh dalam Bootstrap 3?

Mencapai Reka Letak Dua Lajur Tinggi Penuh dalam Bootstrap 3

Bootstrap 3 tidak mempunyai sokongan asli untuk reka letak lajur tinggi penuh. Walau bagaimanapun, dengan menggunakan CSS tersuai dan memanfaatkan jadual CSS, kami boleh meniru fungsi ini.

Markup

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

Berkaitan CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

Penjelasan

Kod ini mencapai lajur berketinggian penuh dan nisbah 1:3 (Navigasi:Kandungan) untuk lebar skrin sederhana dan ke atas . Kelas CSS tersuai (tiada terapung) digunakan untuk menghalang lajur terapung dan memastikan ia dipaparkan sebagai sel jadual.

Pertimbangan

• Lajur asli Bootstrap kelas (col-md-3, col-md-9) digunakan untuk responsif.
• Untuk skrin yang lebih kecil (di bawah sederhana), lajur kembali kepada gelagat bootstrap lalainya (setiap lajur menduduki 100% lebar).
• Jika nisbah 1:3 diperlukan untuk semua lebar skrin, kelas lajur bootstrap boleh dialih keluar daripada penanda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Dua Lajur Tinggi Penuh dalam Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!