Rails 7中Bootstrap JS功能失效求助：下拉菜单及导航栏按钮无响应

你的问题核心是只在 Importmap 中 pin 了 Bootstrap 和 Popper 包，但没有在 JavaScript 入口文件中正确导入并初始化 Bootstrap 的交互组件，另外可能存在 Popper 的映射路径错误。以下是具体解决步骤：

1. 修正 app/javascript/application.js 代码 #

Bootstrap 5 依赖 Popper 实现下拉、弹出层等交互，且 Rails 7 默认启用 Turbo，页面加载方式和传统模式不同，需要在 Turbo 加载完成后初始化 Bootstrap 组件。替换你的 application.js 内容为：

import "@hotwired/turbo-rails"
import "controllers"
// 导入 Popper 和 Bootstrap 核心模块
import * as Popper from '@popperjs/core'
import * as Bootstrap from 'bootstrap'

// 监听 Turbo 页面加载事件，初始化所有 Bootstrap 交互组件
document.addEventListener('turbo:load', () => {
  // 初始化下拉菜单
  document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => {
    new Bootstrap.Dropdown(el)
  })
  // 初始化导航栏折叠按钮
  document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => {
    new Bootstrap.Collapse(el)
  })
  // 可选：通用初始化所有带 data-bs-toggle 属性的组件
  // document.querySelectorAll('[data-bs-toggle]').forEach(el => {
  //   const componentName = el.getAttribute('data-bs-toggle').charAt(0).toUpperCase() + el.getAttribute('data-bs-toggle').slice(1)
  //   if (Bootstrap[componentName]) {
  //     new Bootstrap[componentName](el)
  //   }
  // })
})

2. 确保 Importmap 映射路径正确 #

你当前的 @popperjs/core 映射路径可能有误，建议重新运行 Importmap 命令自动生成正确映射：

./bin/importmap pin @popperjs/core bootstrap

执行后，你的 config/importmap.rb 会自动更新为正确的路径，类似：

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/dist/esm/index.js"

3. 验证并测试 #

• 重启 Rails 开发服务器：bin/dev
• 强制刷新浏览器页面（Ctrl+Shift+R），清除缓存
• 打开浏览器控制台（F12），检查是否有 JS 加载错误，若有根据错误提示调整路径或导入代码

常见排查点 #

• 检查页面中 Bootstrap 组件的 HTML 结构是否符合官方规范，比如下拉菜单需要正确的 data-bs-toggle="dropdown" 属性和对应嵌套结构
• 确认 CSS 已正确导入（比如在 app/assets/stylesheets/application.bootstrap.scss 中添加 @import "bootstrap";）

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