Bootstrap 5导航栏切换按钮失效问题的原因及解决方法

原因 #

你的代码只引入了Bootstrap的CSS文件，但没有引入Bootstrap的JavaScript文件。Bootstrap 5的折叠交互（包括导航栏的展开/收起功能）依赖其JS插件实现，缺少JS的话，点击toggler按钮不会触发任何展开动作。

解决方法 #

在页面的<body>标签末尾（或在<head>中给<script>添加defer属性）引入Bootstrap 5的JavaScript文件即可。Bootstrap 5的CDN JS已包含所需的Popper.js，无需单独引入。

修正后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>bootstrap installation</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="">tindog</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul class="navbar-nav m-lg-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="">Contact</a>
                    </li>    
                    <li class="nav-item">
                        <a class="nav-link" href="">Pricing</a>
                    </li> 
                    <li class="nav-item">
                        <a class="nav-link" href="">Download</a>
                    </li>            
                </ul>
            </div>
        </nav>

        <!-- 新增：引入Bootstrap JavaScript文件 -->
        <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>
    </body>
</html>

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