如何在 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">

具有固定宽度的增强侧边栏

以下更新的侧边栏更接近您提供的示例，并具有固定宽度、自适应行为和向左/向右滑动的动画:

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

以上是如何在 Bootstrap 中创建响应式导航栏侧边栏'抽屉”？的详细内容。更多信息请关注PHP中文网其他相关文章！