Bagaimana untuk Membetulkan Navigasi Bar Sisi dalam Fluid Twitter Bootstrap 2.0?

Betulkan Navigasi Bar Sisi dalam Fluid Twitter Bootstrap 2.0

Mencapai navigasi bar sisi yang kekal pegun semasa menatal dalam susun atur bendalir adalah mudah.

Pelaksanaan

CSS

Tentukan kelas tetap bar sisi-nav baharu untuk membetulkan bar sisi anda dan menambah kelas ofset pada div kandungan anda untuk mengimbangi margin kiri:

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

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

Dikemas kini Pilihan

Untuk keserasian responsif, pertimbangkan 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;
    }
}

HTML

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

Ambil perhatian bahawa terdapat sedikit perbezaan lebar dalam bar sisi tetap disebabkan olehnya tidak mewarisi lebar daripada div bekas.

Alternatif Kaedah

Untuk memastikan bar sisi tetap sehingga grid jatuh untuk paparan mudah alih, gunakan CSS ini:

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

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