Bagaimana untuk Memastikan Bar Sisi Tetap pada Tatal dalam Fluid Bootstrap 2.0?

Memastikan Sidebar Tetap pada Tatal dalam Fluid Bootstrap 2.0

Untuk susun atur bendalir, anda boleh membetulkan navigasi bar sisi pada skrol dengan melaksanakan kelas tersuai.

CSS tersuai

Buat kelas .sidebar-nav-fixed untuk mengawal kedudukan tetap bar sisi dan menambah .row-fluid > .span-fixed-sidebar ke bekas kandungan untuk mengimbangi margin bar sisi. Berikut ialah CSS:

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Struktur HTML

Gunakan struktur HTML berikut untuk melaksanakan bar sisi tetap:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav sidebar-nav-fixed">
        ...
      </div>
    </div>
    <div class="span9">
      ...
    </div>
  </div>
</div>

Konfigurasi Lanjutan

Untuk lebih fleksibiliti, gunakan pertanyaan media CSS untuk melaraskan kedudukan bar sisi berdasarkan saiz skrin. Berikut ialah contoh:

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position:static;
        width: auto;
    }
}

Konfigurasi ini memastikan bar sisi tetap sehingga saiz skrin menurun untuk skrin kecil atau paparan mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Bar Sisi Tetap pada Tatal dalam Fluid Bootstrap 2.0?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!