Bootstrap 导航栏下拉菜单无法始终如一地运行？

Question

我无法让 Bootstrap 导航栏下拉菜单始终如一地工作。

• 在第一页加载时，它可以工作
• 如果我单击导航链接，当新页面加载时，下拉菜单可能会下拉或不执行任何操作。
• 如果在下拉菜单失败后，我点击了其他一些可能会修复它但很可能不会修复的链接。
• 如果我刷新页面，下拉菜单将始终有效。

我正在使用 Bootstrap 4.5 开发 Rails 6 应用程序。我几乎从他们的文档中复制了示例导航栏代码，填写了链接路径并调整了 ID。 （我还删除了试图排除故障的切换器）

如果对我有帮助，我也遇到过类似的问题，即 Bootstrap 折叠功能无法始终如一地工作。

视图/布局/application.html.haml：

%html
  %head
    %link{:crossorigin => "anonymous", :href => "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css", :integrity => "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2", :rel => "stylesheet"}/


    %title
      @title

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = csrf_meta_tags
    = csp_meta_tag

  %body
    .container
      = render "layouts/nav"
      %p.notice.hide= notice
      %p.alert.hide= alert
      = yield
      .footer

    %script{:crossorigin => "anonymous", :integrity => "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", :src => "https://code.jquery.com/jquery-3.5.1.slim.min.js"}
    %script{:crossorigin => "anonymous", :integrity => "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx", :src => "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"}

视图/布局/_nav.html/haml：

%nav.navbar.navbar-expand.navbar-light.bg-light
  %a.navbar-brand{:href => root_path} Home
  #navbarSupportedContent
    %ul.navbar-nav.mr-auto
      %li.nav-item.dropdown
        %a#navbarDropdownOne.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
          Planner
        .dropdown-menu{"aria-labelledby" => "navbarDropdownOne"}
          %a.dropdown-item{:href => events_path} Events
          %a.dropdown-item{:href => setups_path} Setups
          %a.dropdown-item{:href => event_sessions_path} Event Sessions
          %a.dropdown-item{:href => setup_answers_path} Setup Answers

      %li.nav-item.dropdown
        %a#navbarDropdownTwo.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
          Supplier
        .dropdown-menu{"aria-labelledby" => "navbarDropdownTwo"}
          %a.dropdown-item{:href => setup_categories_path} Setup Categories
          %a.dropdown-item{:href => questions_path} Questions
          %a.dropdown-item{:href => multiple_choices_path} Multiple Choices
          %a.dropdown-item{:href => template_items_path} Template Items
          %a.dropdown-item{:href => template_answers_path} Template Answers
          %a.dropdown-item{:href => items_path} Items

      %li.nav-item.dropdown
        %a#navbarDropdownThree.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
          Admin
        .dropdown-menu{"aria-labelledby" => "navbarDropdownThree"}
          %a.dropdown-item{:href => user_path(current_user)} Your Account
          %a.dropdown-item{:href => users_path} Users

Answer 1

我似乎在做一个不相关的教程时偶然找到了解决方案。 （使用带有导轨的反应）

我没有完全按照bootstrap 4.5 docs 的说明在终端运行：

yarn add bootstrap jquery popper.js

然后在 app/javascript/packs/application.js 我有：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require('bootstrap')
import 'bootstrap/dist/css/bootstrap'

我删除了样式表和脚本链接，取而代之的是 app/views/layouts/application.html.haml 的“stylesheet_pack_tag”：

%html
  %head
    %title
      = @title

    = csrf_meta_tags
    = csp_meta_tag

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = stylesheet_pack_tag 'application'


  %body
    .container
      - if current_user
        = render "layouts/nav"
      %p.notice.hide= notice
      %p.alert.hide= alert
      = yield
      .footer