Bootstrap Navbar折叠图标不显示：移动端点击有效但图标消失

嘿，我之前帮好几个开发者解决过一模一样的问题——点击折叠区域能展开菜单，但就是看不到汉堡图标。这种情况基本都是视觉层面的问题，JS逻辑其实是正常的，咱们从最常见的几个方向排查：

1. 先确认Bootstrap图标资源是否到位 #

Bootstrap 5开始，默认的折叠图标（汉堡菜单）依赖Bootstrap Icons库，如果没引入这个库，图标就会“隐身”：

• 解决办法：在你的HTML头部加上Bootstrap Icons的CDN链接（或者本地引入资源）：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  

  同时检查你的折叠按钮代码，确保图标结构正确：

  <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>
  

  要是你用的是Bootstrap 4或更早版本，虽然不需要额外图标库，但如果自定义了主题，也可能导致内置的navbar-toggler-icon背景图丢失。

2. 检查自定义CSS是不是“藏”了图标 #

你的Navbar用了自定义类royalblue，很可能是自定义样式不小心覆盖了图标的显示属性：

• 排查技巧：按F12打开浏览器开发者工具，找到navbar-toggler-icon元素，查看它的background-image、opacity或者display属性有没有被异常修改。
• 修复方案：如果是样式覆盖导致的，针对性恢复就行。比如强制恢复默认的汉堡图标背景：

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  

  要是用的是Bootstrap Icons字体图标，确保颜色和背景有足够对比度：

  .navbar-toggler-icon {
    color: #fff; /* 换成你需要的颜色 */
  }
  

3. 核对HTML结构是否完整 #

从你给出的代码片段看，Navbar开头是对的，但要确保折叠按钮和对应的折叠容器配对完整：

• 完整的结构示例参考：

  <nav class="navbar navbar-expand-lg justify-content-between navbar-dark bg-primary royalblue">
    <div class="container">
      <a class="navbar-brand" href="{% url 'home' %}">
        <img src="{% static 'images/dealmazing_logo.png' %}" class="img-fluid" style="height:50px;" alt="DealAmazing Logo">
      </a>
      <!-- 折叠按钮 -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 折叠菜单容器 -->
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <!-- 其他导航链接 -->
        </ul>
      </div>
    </div>
  </nav>
  

  重点确认data-bs-target的值和折叠容器的id完全一致，不然也可能出现视觉异常。

4. 最后确认Bootstrap JS加载正常 #

虽然点击能触发菜单说明JS逻辑没问题，但还是要确保Bootstrap的JS（Bootstrap 5需要搭配Popper.js）正确引入，建议放在页面底部或者加defer属性：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

先从第一个原因开始排查，大部分情况都是图标库没引入或者样式被覆盖导致的，应该能快速解决你的问题！

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