Bagaimana untuk Mencipta Lajur Tinggi Penuh dalam Bootstrap 3 menggunakan CSS Tersuai?

Bootstrap 3 Lajur Tinggi Penuh: Penyelesaian CSS Tersuai

Pengenalan:

Mencipta susun atur ketinggian penuh dengan Twitter Bootstrap 3 boleh mencabar. Walaupun kelas asli Bootstrap tidak menyokong ciri ini, kesan ini boleh dicapai menggunakan CSS tersuai.

Pendekatan CSS Tersuai:

1. Tetapan 100% Ketinggian:
   Tetapkan ketinggian badan, bekas dan elemen baris kepada 100% untuk memastikan ia menjangkau ketinggian penuh port pandangan.
2. Memaparkan sebagai Jadual:
   Tukar elemen bekas kepada jadual menggunakan paparan: jadual. Ini membolehkan kandungan bekas disusun dalam struktur jadual.
3. Sel Terapung:
   Tambahkan kelas tersuai, seperti tanpa terapung, pada lajur navigasi. Tetapkan kelas ini supaya mempunyai paparan: table-cell dan float: none. Ini akan menghalang lajur navigasi daripada terapung dan membenarkannya menjajarkan secara menegak dengan lajur kandungan.

Penanda:

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

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Kelebihan dan Pertimbangan:

• Penyelesaian CSS tersuai ini menyediakan susun atur ketinggian penuh yang serasi dengan Bootstrap 3.
• Nisbah 1:3 navigasi kepada kandungan boleh dilaraskan dengan mengubah suai lebar lajur dalam CSS.
• Walau bagaimanapun, adalah penting untuk menggunakan kelas tersuai (cth., tiada terapung) dan bukannya mengubah suai kelas lajur asli Bootstrap untuk mengelakkan konflik.

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