如何在 Bootstrap 5 中创建响应式导航栏侧边栏'抽屉”？-css教程-PHP中文网

如何在 Bootstrap 5 中创建响应式导航栏侧边栏'抽屉”？

Patricia Arquette

发布： 2024-11-14 17:33:02

原创

224 人浏览过

How to Create a Responsive Navbar Sidebar

在 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中文网其他相关文章！