Rails7+Bootstrap5.3.3折叠导航栏汉堡按钮点击无响应求助

问题根源 #

你当前同时混用了Sprockets的//= require语法和Importmap的ES模块导入加载Bootstrap/Popper，导致JS代码冲突或重复加载，直接破坏了Bootstrap折叠组件的功能。另外，bootstrap-sprockets是Bootstrap 4及更早版本的写法，Bootstrap 5已不再使用该命名。

分步解决方案 #

1. 统一JS加载方式（用Importmap，Rails7默认推荐）

修改app/javascript/application.js，彻底移除Sprockets的//= require语句，只保留ES模块导入：

import "popper"
import "bootstrap"

2. 修正Importmap配置

确保config/importmap.rb中的pin指向正确（适配Bootstrap 5的文件结构）：

pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
# 如果上述路径加载失败，替换为gem官方的pin路径：
# pin "bootstrap", to: "@rails/bootstrap", preload: true

3. 清理冗余的Sprockets配置

• 打开config/initializers/assets.rb，删除以下代码：

  Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )
  

  （Importmap会管理这些JS文件的加载，无需Sprockets预编译）

4. 确认导航栏右对齐设置

你的导航栏已经用了ms-auto类在navbar-nav上，这是Bootstrap 5实现右对齐的正确写法，保留即可：

<ul class="navbar-nav ms-auto">
  <!-- 导航项 -->
</ul>

5. 验证Bootstrap JS加载状态

启动Rails服务后，打开浏览器开发者工具：

• 切换到Console标签，输入bootstrap.Collapse，如果返回ƒ Collapse(config) { ... }，说明Bootstrap JS加载成功；
• 切换到Network标签，确认bootstrap.min.js和popper.js的HTTP状态为200（无404错误）。

额外修复（若Turbo干扰组件初始化） #

如果Turbo Rails导致Bootstrap组件未自动初始化，在app/javascript/application.js中添加Turbo加载事件监听：

document.addEventListener('turbo:load', () => {
  // 初始化所有带data-bs-toggle的组件
  document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => {
    new bootstrap.Collapse(el)
  })
})

内容的提问来源于stack exchange，提问作者wired for freedom