Bootstrap导航栏navbar-toggler-icon不显示且点击无响应问题

两个异常（toggler图标不可见、折叠功能失效）由以下几个代码问题直接导致：

• Bootstrap 5组件属性名书写错误：折叠触发属性你用了data-toggle="collapse"，Bootstrap 5对所有组件的data属性统一增加了bs-前缀，错误的属性名会导致JS无法绑定折叠触发事件，点击按钮自然不会有展开/收起的响应。
• HTML标签闭合错误：包裹导航列表的父容器是<div class="col-3">，但结束位置写的是无效的<div>而非闭合标签</div>，DOM结构解析异常会同时影响样式渲染和组件的DOM节点定位。
• 静态资源缺失：toggler图标依靠Bootstrap CSS内置的背景规则渲染，折叠交互依靠Bootstrap JS脚本实现，如果没有正确引入对应版本的CSS和JS资源，会直接触发这两个故障。

按以下顺序调整代码即可：

1. 修正按钮的折叠触发属性，将data-toggle="collapse"替换为data-bs-toggle="collapse"，和Bootstrap 5的属性规则保持一致。
2. 修正HTML结构错误，将导航列表父容器末尾错误的<div>改为正确的闭合标签</div>，保证DOM结构合法。
3. 检查页面资源引入：在页面<head>标签内引入Bootstrap 5的CSS文件，在</body>标签闭合前引入Bootstrap 5的JS bundle文件（该包已内置Popper依赖，无需单独引入）。
4. 如果完成以上步骤后图标仍不显示，检查自定义CSS中是否存在针对.navbar-toggler-icon的样式覆盖，移除冲突的自定义规则即可。

修复后的核心代码参考：

<button class="navbar-toggler" type="button"
        data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button> 
<div class="col-3">
  <ul class="navbar-nav collapse navbar-collapse" id="navbarSupportedContent">
    <li class="nav-item active">
      <a class="nav-link" href="#">Some text</a>
    </li>
    <!-- 其余导航项按相同格式补充 -->
  </ul>
</div>

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