如何在 Bootstrap 5 中建立響應式導航列側邊欄「抽屜」？

在 Bootstrap 中建立響應式導覽列側邊欄「抽屜」？

使用 Bootstrap 5 Beta 3（2021 年更新）

Bootstrap 現在提供了 Offcanvas 元件，可以更輕鬆地建立側邊欄。

使用 Bootstrap 4（原答案）

側邊欄的注意事項：

• 反應能力
• 多層次結構
• 可切換性
• 定位（推播與覆蓋，左或右）
• 已修復或黏性行為
• 動畫風格

解決特定要求：

1.回應能力：

• 將右側列類別更新為col 而不是 col-auto。

2.導覽列捲動：

• 從導覽列中刪除黏性頂類以防止其貼上。

3.黏性選單按鈕：

• 選單按鈕不應該是黏性的，因為它沒有與側邊欄對齊。

4.背景調光器：

• 本答案未涵蓋此內容。

具有增強功能的側邊欄範例：

此範例側邊欄與參考連結中的側邊欄非常相似，包括：

• 固定寬度
• 在較小的螢幕上自動關閉，在較寬的螢幕上開啟
• 可切換所有寬度
• 較小螢幕上的響應式覆蓋側邊欄

完整版本的附加CSS：

.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}

示範：

https://codeply.com/go/w1AMD1EY3c

以上是如何在 Bootstrap 5 中建立響應式導航列側邊欄「抽屜」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！