Bootstrap 5导航栏Toggle按钮小屏幕无响应问题排查求助

你的Toggle按钮失效的核心原因是使用了Bootstrap 5已废弃的表单类，导致导航栏的折叠结构被破坏：

• Bootstrap 3的navbar-form和form-inline类在Bootstrap 5中已被移除，继续使用会引发布局冲突，干扰折叠组件的正常工作。
• 这些过时的类会改变表单元素的默认布局，在小屏幕下可能导致折叠容器内部的元素溢出或层级异常，进而阻断Toggle按钮的点击事件响应。

修复步骤 #

1. 删除navbar-form和form-inline类，改用Bootstrap 5的Flex布局类来控制表单的排列。
2. 为搜索表单添加合适的间距类，避免和其他导航元素挤压。

修复后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-dark shadow-10-strong bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Travel <b>Friend</b></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-start" id="navbarNav">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Pricing</a>
        <a href="#" class="nav-item nav-link">Blog</a>
        <a href="#" class="nav-item nav-link">Contact</a>
      </div>

      <!-- 搜索栏：使用Bootstrap 5的Flex布局类 -->
      <form class="d-flex mx-3">
        <div class="input-group search-box">
          <input type="text" id="search" class="form-control bg-transparent text-white" placeholder="Search here..." />
          <div class="input-group-append">
            <span class="input-group-text bg-transparent text-white">
              <a href="#" class="material-icons text-white">&#xE8B6;</a>
            </span>
          </div>
        </div>
      </form>

      <!-- 登录注册按钮 -->
      <div class="navbar-nav ms-auto action-buttons">
        <a href="#" class="nav-item nav-link">Login</a>
        <a href="#" class="nav-item nav-link">Sign up</a>
      </div>
    </div>
  </div>
</nav>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>

额外优化说明：

• 为搜索输入框和图标添加text-white类，确保在深色导航栏中文字可见。
• 给表单添加mx-3类，增加和左右元素的间距，提升视觉效果。
• 为Toggle按钮补充了aria-controls、aria-expanded、aria-label属性，符合无障碍访问标准。

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