Bootstrap Navbar 汉堡菜单未折叠

Question

我正在使用 Bootstrap v5.3，并且我已向我的网站添加了导航栏。我遇到的问题是，当我在网站的移动版本上单击导航栏汉堡包图标时，它不会折叠。有人可以检查我的代码是否正确吗？我真的不知道问题出在哪里。

<nav class="navbar navbar-expand-sm navbar-light bg-light">
        
        <a
            href="#"
            class="navbar-brand mb-0 h1">
            Logo
            </a>
            <button
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            class="navbar-toggler"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
            >
            <span class="navbar-toggler-icon"></span>
        </button>

            <div 
            class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a href="#" class="nav-link active">
                            Home
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            About Us
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Courses
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Contact
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Blog
                        </a>
                    </li>
                </ul>
            </div>
            
    </nav>

我使用了

data-bs-toggle="collapse"

但这不起作用。

Answer 1

您需要安装所需的 CDN，如下所示。 CSS CDN 位于 HTML 的头部，脚本 CDN 位于正文的末尾，如 Bootstrap

中所述

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
        
        <a
            href="#"
            class="navbar-brand mb-0 h1">
            Logo
            </a>
            <button
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            class="navbar-toggler"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
            >
            <span class="navbar-toggler-icon"></span>
        </button>

            <div 
            class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a href="#" class="nav-link active">
                            Home
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            About Us
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Courses
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Contact
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Blog
                        </a>
                    </li>
                </ul>
            </div>
            
    </nav>