Bootstrap 5 OffCanvas在带有sm屏幕的导航栏内不工作

sdnqo3pr 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(2168)

我试图让Bootstrap 5 OffCanvas在导航栏中工作，但它不工作，除非移动的屏幕大小为sm或更低。我需要在sm屏幕大小显示汉堡菜单，所以我不能在那里做什么。
如何在笔记本电脑/台式机上实现此功能？

JSFIDdle演示：https://jsfiddle.net/emzrf80v/

于飞：

<header class="menu">
        <nav class="navbar navbar-expand-sm">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="" class="logo">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    hey
                </div>
                <div class="d-flex"><span class="icon icon-search"></span></div>
                <div class="offcanvas offcanvas-top" id="demo">
                    <div class="offcanvas-header">
                        <h1 class="offcanvas-title">Heading</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                    </div>
                    <div class="offcanvas-body">
                        <p>Some text lorem ipsum.</p>
                        <p>Some text lorem ipsum.</p>
                        <p>Some text lorem ipsum.</p>
                        <button class="btn btn-secondary" type="button">A Button</button>
                    </div>
                </div>
                <div class="container-fluid mt-3">
                    <h3>Offcanvas Sidebar</h3>
                    <p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
                        Open Offcanvas Sidebar
                    </button>
                </div>
            </div>
        </nav>
    </header>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74169799/bootstrap-5-offcanvas-not-working-inside-navbar-with-sm-screen

1条答案

按热度按时间

ctehm74n1#

尝试从导航标签中删除“navbar-expand-sm”类。您也可以根据其他断点（如“navbar-expand-md”或“navbar-expand-lg”）调整它。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<header class="menu">
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="" class="logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                hey
            </div>
            <div class="d-flex"><span class="icon icon-search"></span></div>
            <div class="offcanvas offcanvas-top" id="demo">
                <div class="offcanvas-header">
                    <h1 class="offcanvas-title">Heading</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                </div>
                <div class="offcanvas-body">
                    <p>Some text lorem ipsum.</p>
                    <p>Some text lorem ipsum.</p>
                    <p>Some text lorem ipsum.</p>
                    <button class="btn btn-secondary" type="button">A Button</button>
                </div>
            </div>
            <div class="container-fluid mt-3">
                <h3>Offcanvas Sidebar</h3>
                <p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
                    Open Offcanvas Sidebar
                </button>
            </div>
        </div>
    </nav>
</header>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 5 OffCanvas在带有sm屏幕的导航栏内不工作

1条答案

相关问题

热门标签

最新问答