可以在 Fluid Bootstrap 2.0 佈局中實現固定側邊欄嗎？-css教學-PHP中文網

可以在 Fluid Bootstrap 2.0 佈局中實現固定側邊欄嗎？

Mary-Kate Olsen

發布： 2024-11-08 17:14:02

原創

479 人瀏覽過

Can a Fixed Sidebar Be Implemented in a Fluid Bootstrap 2.0 Layout?

在Fluid Bootstrap 2.0 版面配置固定側邊欄

問題：

問題： 保持在保持側邊欄位是否固定側邊欄位是否固定是否固定可行滾動時流暢版面？

解決方案：是的，這是可能的。操作方法如下：

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

登入後複製

為側邊欄建立固定類別：

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

登入後複製

套用偏移內容div的類別：

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

登入後複製

更新：

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

登入後複製

替代方法：

保持固定側邊欄直到佈局切換到移動視圖：

注意： Bootstrap 2.0。 4 及更早版本沒有 Affix jQuery 插件，該插件提供了修復側邊欄元素的高級功能。此解決方案僅適用於早期的 Bootstrap 版本。

以上是可以在 Fluid Bootstrap 2.0 佈局中實現固定側邊欄嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！