Bagaimana untuk Membetulkan Navigasi Bar Sisi dalam Fluid Twitter Bootstrap 2.0?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-11-11 16:01:02

asal

410 orang telah melayarinya

How to Fix the Sidebar Navigation in 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;
}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!