Bolehkah Bar Sisi Tetap Dilaksanakan dalam Susun Atur Fluid Bootstrap 2.0?

Mengekalkan Bar Sisi Tetap dalam Susun Letak Fluid Bootstrap 2.0

Masalah: Adakah boleh memastikan navigasi bar sisi tetap dalam susun atur bendalir semasa menatal?

Penyelesaian: Ya, mungkin. Begini cara untuk melakukannya:

1. Buat kelas tetap untuk bar sisi:

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

2. Gunakan offset kelas ke div kandungan:

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

CSS ini memastikan bar sisi kekal tetap semasa menatal dan melaraskan kawasan kandungan untuk mengimbangi lebar bar sisi.

Penyelesaian Diperhalusi:

• Kemas kini: Untuk menyokong reka letak responsif Bootstrap, demo telah dikemas kini dengan CSS berikut:

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

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

• Pendekatan Alternatif: Untuk mengekalkan bar sisi tetap sehingga reka letak bertukar kepada paparan mudah alih:

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top: 70px;
    }
}

Nota: Bootstrap 2.0. 4 dan versi terdahulu tidak mempunyai pemalam Affix jQuery, yang menyediakan fungsi lanjutan untuk membetulkan elemen bar sisi. Penyelesaian ini terpakai untuk versi Bootstrap yang lebih awal sahaja.

Atas ialah kandungan terperinci Bolehkah Bar Sisi Tetap Dilaksanakan dalam Susun Atur Fluid Bootstrap 2.0?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!