Bagaimana untuk Mencipta Reka Letak Dua Lajur Tinggi Penuh dalam Bootstrap 3?

Bootstrap 3 Dua Lajur Ketinggian Penuh: Panduan Komprehensif

Pengenalan
Mencapai susun atur lajur ketinggian penuh dalam Bootstrap 3 boleh satu cabaran, kerana kelas asli tidak menyokong fungsi ini. Artikel ini meneroka penyelesaian yang menggunakan CSS tersuai untuk mencipta lajur berketinggian penuh dengan nisbah 1:3, memenuhi keperluan untuk reka letak yang kedua-dua lajur memanjangkan ketinggian penuh port pandangan.

Penanda HTML
Struktur HTML untuk reka letak ini terdiri daripada pengepala, bekas, baris dan dua lajur.

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

Gaya CSS
Untuk mencapai lajur berketinggian penuh, kami menggabungkan CSS tersuai yang menggunakan paparan: jadual; harta untuk mencipta jadual css, memastikan kedua-dua lajur memanjangkan ketinggian penuh port pandangan.

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

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

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

Penjelasan
Gaya CSS mentakrifkan perkara berikut:

• html, badan dan .bekas ditetapkan kepada ketinggian: 100%; untuk memastikan kandungan memenuhi keseluruhan port pandangan.
• .bekas dikonfigurasikan dengan paparan: jadual; untuk mencipta jadual css.
• .row menetapkan sifat paparan kepada table-row untuk mencipta baris dalam jadual css.
• .row .no-float sets display: table-cell to jadikan lajur berkelakuan seperti sel jadual dalam baris.
• terapung: tiada satu pun mengatasi gelagat terapung lalai Bootstrap untuk lajur.

Penyesuaian

• Edit nilai margin atas pada .container untuk melaraskan margin atas pengepala.
• Ubah suai nilai padding pada .container untuk menetapkan jarak kiri/kanan bagi lajur.
• Alih keluar kelas col-md-* daripada lajur untuk mencipta nisbah 1:3 tetap merentas semua lebar skrin.

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