Bootstrap导航栏折叠按钮点击无响应问题排查求助

你的代码缺少了Bootstrap JavaScript文件的引入，Bootstrap 5的折叠交互功能必须依赖JS才能正常工作——仅引入CSS只能实现基础样式渲染，无法处理点击展开的交互逻辑。

修复步骤 #

在页面底部（</body>标签之前）添加Bootstrap的JS脚本：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

完整修正后的代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light navbar-expand-sm bg-light">
    
    <a class="navbar-brand mb-0 h1" href="#">NavBar</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">Blue</a>
            </li>
            <li class="nav-item active">
                <a href="#" class="nav-link">Red</a>
            </li>
            <li class="nav-item active">
                <a href="#" class="nav-link">Green</a>
            </li>

        </ul>

    </div>

    
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

补充说明：bootstrap.bundle.min.js已经包含了Popper.js，这是Bootstrap 5部分组件（包括折叠）依赖的工具库，无需单独引入。

内容的提问来源于stack exchange，提问作者palloc