如何修復 Fluid Twitter Bootstrap 2.0 中的側邊欄導覽？-css教學-PHP中文網

如何修復 Fluid Twitter Bootstrap 2.0 中的側邊欄導覽？

Susan Sarandon

發布： 2024-11-11 16:01:02

原創

410 人瀏覽過

How to Fix the Sidebar Navigation in Fluid Twitter Bootstrap 2.0?

修復流體 Twitter Bootstrap 2.0 中的側邊欄導航

在流體佈局中滾動時實現保持靜止的側邊欄導航非常簡單。

實作

CSS

定義一個新的sidebar-nav-fixed 類別來修復你的側邊欄，並向你的內容div新增偏移類別以補償左邊距：

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

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

登入後複製

更新選項

為了響應式相容性，請考慮以下CSS：

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

登入後複製

請注意，有一個較小的寬度固定側邊欄的差異，因為它沒有繼承容器div 的寬度。

替代方法

要保持側邊欄固定，直到移動視圖的網格下降，請使用以下 CSS：

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

登入後複製

以上是如何修復 Fluid Twitter Bootstrap 2.0 中的側邊欄導覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！