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

Bootstrap 3 Dua Lajur Pengoptimuman Ketinggian Penuh

Dalam Bootstrap 3, mencipta reka letak ketinggian penuh dengan dua lajur boleh mencabar. Kelas asli tidak menyokong perkara ini di luar kotak. Walau bagaimanapun, kami boleh melaksanakannya menggunakan CSS tersuai.

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>

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

CSS ini memanfaatkan jadual CSS untuk membuat lajur berketinggian penuh. Kelas '.no-float' menghalang keruntuhan lajur disebabkan oleh reka letak berasaskan apungan Bootstrap.

Pertimbangan Tambahan:

• Untuk mengekalkan 1:3 nisbah untuk lebar skrin sederhana dan ke atas, gunakan '.col-md-3' dan '.col-md-9' kelas.
• Jika nisbah ini diperlukan untuk semua lebar skrin, pertimbangkan untuk mengalih keluar kelas lajur Bootstrap untuk mengelakkan penggunaan yang tidak betul.
• Skrin yang lebih kecil lalai kepada tingkah laku lajur Bootstrap biasa dengan setiap lajur mengambil penuh lebar.

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