Bootstrap 5导航栏移动端切换按钮失效问题求助

你遇到的问题核心是Bootstrap 5 对折叠组件的数据属性做了命名变更——从 Bootstrap 4 的data-toggle/data-target，改为了带bs前缀的data-bs-toggle/data-bs-target，这是导致按钮点击无响应的直接原因。

需要修改的两处代码： #

• 将按钮上的 data-toggle="collapse" 替换为 data-bs-toggle="collapse"
• 将 data-target="#navbarNav" 替换为 data-bs-target="#navbarNav"

修正后的完整导航栏代码： #

<nav class="navpaddingy navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img class="navimage" src="images/logo.png" alt=""></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" id="navbarNav">
    <ul class="navbar-nav ms-auto navpaddingx">
      <li class="nav-item">
        <a class="nav-link" href="#">Ceramic Coatings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Exterior Wash</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

额外检查项： #

• 确认页面已正确引入 Bootstrap 5 的 JavaScript 文件（折叠功能依赖 Bootstrap 的 JS 插件，不能只引入 CSS）
• 排查自定义 CSS 类（如navpaddingy、navpaddingx）是否意外覆盖了 Bootstrap 的默认交互样式

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