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

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

Bootstrap 5 引進了官方 Offcanvas 元件，可以簡化側邊欄的建立。然而，創建沒有組件的側邊欄仍然是可能的。

側邊欄導覽的注意事項

側邊欄導覽選單可能會帶來各種挑戰：

• 回應能力： 側邊欄是否應根據螢幕調整其寬度、可見度或方向尺寸？
• 多級：導航項目是否應該包含子級別，以及如何適應它們的高度？
• 切換：側邊欄可以使用按鈕或圖示？
• 定位：側邊欄應該放置在頁面內容旁邊還是後面？
• 放置：側邊欄應該出現在左側還是右側side?
• 滾動：側邊欄應該如何滾動與頁面的關係？
• 動畫：側邊欄是否應該滑動、折疊或淡出視圖？

推薦方法

在此具體情況，不要在右列使用 col-auto，而是考慮在選單開啟時使用 col填充寬度折疊：

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark">
<h3 id="具有固定寬度的增強側邊欄">具有固定寬度的增強側邊欄</h3>
<p>以下更新的側邊欄更接近您提供的示例，並具有固定寬度、自適應行為和向左/向右滑動的動畫:</p>
<pre class="brush:php;toolbar:false">/* Set sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

/* Adjust sidebar on collapsing */
.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

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

/* Adjust sidebar on collapsing */
.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

全功能側邊欄

此高級側邊欄包括附加功能功能：

• 固定寬度
• 自適應行為（依照螢幕折疊或覆蓋大小）
• 切換
• 響應式（在較小的螢幕上變成覆蓋）

/* Optional for overlay sidebar on small screens */
@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;
    }
}