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

Bootstrap 3 Tinggi Penuh Dua Lajur Reka Letak

Masalah:

Mencipta dua -letak letak lajur dengan ketinggian penuh dalam Bootstrap 3 menimbulkan cabaran kerana kekurangan sokongan asli untuk ini reka letak tertentu.

Penyelesaian:

Walaupun kelas Bootstrap 3 sahaja tidak dapat mencapai ini, kami boleh menggunakan CSS untuk melaksanakan penyelesaian lajur ketinggian penuh tersuai menggunakan CSS jadual.

HTML:

<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;
    box-sizing: border-box;
}

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

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

Penjelasan:

Penyelesaian ini menggunakan jadual CSS untuk mencapai kesan ketinggian penuh. Elemen .container ditetapkan untuk memaparkan: jadual dan elemen .row untuk dipaparkan: table-row. Unsur lajur (.col-md-3 dan .col-md-9) ditetapkan untuk dipaparkan: sel jadual dan apungan: tiada, yang mengalih keluar kelakuan apungan lalai.

Pelarasan Responsif

Untuk memastikan tingkah laku responsif, anda boleh mengubah suai CSS untuk titik putus tertentu. Contohnya, anda boleh menggunakan pertanyaan media untuk hanya menggunakan sifat paparan jadual untuk lebar skrin sederhana dan ke atas.

Kelas Tersuai:

Untuk mengelak daripada mengubah suai lajur Bootstrap asli kelas, kami menggunakan kelas tersuai (tidak terapung) dalam penanda dan hanya menggunakan gaya jadual CSS pada itu kelas.

Pertimbangan:

• Nisbah 1:3 dikodkan keras dalam CSS. Untuk nisbah lain, anda perlu melaraskan pelapik.
• Untuk lajur berketinggian penuh pada semua saiz skrin, alih keluar kelas lajur Bootstrap daripada penanda.

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