本文旨在解决Bootstrap 5导航栏的折叠菜单（toggler button）在浏览器屏幕缩小后无法正常显示的问题。核心原因通常是缺少Bootstrap JavaScript文件的引入。文章将详细阐述如何正确配置Bootstrap环境，确保导航栏的折叠功能正常运行，并提供完整的代码示例及相关注意事项。
引言：导航栏折叠功能失效的常见困扰
在使用Bootstrap 5构建响应式网页时，导航栏的切换按钮（toggler button）是实现移动端菜单折叠展开的关键组件。然而，开发者经常会遇到一个问题：当浏览器屏幕尺寸缩小到一定程度，点击导航栏的切换按钮时，折叠的菜单项却无法正常显示。这导致导航功能在小屏幕设备上失效，严重影响用户体验。
核心原因分析：JavaScript文件的缺失
Bootstrap组件的样式和布局由其CSS文件控制，但其交互行为，例如导航栏的折叠/展开、模态框的显示/隐藏、轮播图的切换等，都依赖于JavaScript。如果HTML文档中仅引入了Bootstrap的CSS文件而忽略了JavaScript文件，那么所有依赖于JavaScript的交互功能都将无法工作。
对于导航栏的折叠功能，HTML元素上的 data-bs-toggle="collapse" 和 data-bs-target="#navbarTogglerDemo02" 等属性是告诉Bootstrap JavaScript代码如何操作DOM的关键。如果没有引入Bootstrap的JS文件，这些属性将无法被解析和执行，导致折叠菜单无法响应点击事件。
解决方案：正确引入Bootstrap JavaScript
要解决导航栏折叠功能失效的问题，最直接且有效的方法是确保在HTML文档中正确引入了Bootstrap的JavaScript文件。通常，推荐将JavaScript文件放置在 </body> 标签之前，这样可以确保HTML内容加载完毕后再执行脚本，从而避免阻塞页面渲染，并确保脚本能够访问到完整的DOM结构。
Bootstrap 5 提供了 bootstrap.bundle.min.js 文件，这是一个包含所有Bootstrap JavaScript组件以及 Popper.js（用于工具提示和弹出框）的打包文件。对于大多数场景，引入这个文件即可满足需求。
以下是引入Bootstrap 5 JavaScript文件的标准方式：
<!-- 在 </body> 标签之前引入 Bootstrap 5 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
示例代码：完整且正确的实现
为了演示如何正确配置Bootstrap 5导航栏，使其折叠功能正常工作，下面提供一个完整的HTML示例代码：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 导航栏折叠功能示例</title>
<!-- 引入 Bootstrap 5 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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">
<div class="container-fluid">
<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 ms-auto mb-2 mb-lg-0"> <!-- 使用 ms-auto 来将菜单项推到右侧 -->
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">下载</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<h1>欢迎来到我们的网站！</h1>
<p>请尝试缩小浏览器窗口，然后点击导航栏的切换按钮。</p>
</div>
<!-- 引入 Bootstrap 5 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>在上述代码中，我们更新了CDN链接至Bootstrap 5.3.0，并增加了 <div class="container-fluid"> 包裹导航栏内容，这是Bootstrap 5的常见实践。同时，将 m-lg-auto 改为 ms-auto 并调整了 mb-2 mb-lg-0，以更好地适应现代Bootstrap导航栏布局。
注意事项与最佳实践
-
CDN vs. 本地文件：
- CDN (Content Delivery Network)： 使用CDN可以提高加载速度，并利用浏览器缓存，减少服务器负载。对于生产环境，CDN通常是首选。
- 本地文件： 如果项目需要离线访问，或者有特定的部署要求（如内网环境），可以将Bootstrap文件下载到本地服务器。
版本匹配： 务必确保引入的Bootstrap CSS文件和JavaScript文件版本一致。例如，如果使用Bootstrap 5.3.0的CSS，也应该使用5.3.0的JS。版本不匹配可能导致样式或功能异常。
-
脚本顺序：
- Bootstrap 5 大幅减少了对jQuery的依赖，但如果你的项目中仍然使用了jQuery，请确保jQuery在Bootstrap JS之前引入。
- bootstrap.bundle.min.js 文件已经包含了 Popper.js，因此通常不需要单独引入 Popper.js。
浏览器控制台： 当遇到功能不工作时，检查浏览器开发者工具的控制台（Console）是排查JavaScript错误的首要步骤。任何JS加载失败、语法错误或执行错误都会在此处显示，提供宝贵的调试信息。
-
*`data-bs-属性：** 仔细检查HTML元素上的data-bs-toggle、data-bs-target等属性是否拼写正确，并且data-bs-target的值（例如#navbarTogglerDemo02）必须与要折叠内容的id属性（例如
