ruby-on-rails - Bootstrap 5 下拉菜单的 Rails 6 问题

Question

我的应用程序上有以下下拉菜单：

<nav class="navbar navbar-expand-sm navbar-light bg-sand-light py-4">

  <%= link_to root_path, class: "navbar-brand ps-4" do %>
    LOGO GOES HERE
    <%#= image_tag "Logo.png", style: "width: 100px" %>
  <% end %>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse me-4" id="navbarNav">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Who We Are</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Partners
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Become a Partner</a>
          <a class="dropdown-item" href="#">Meet Our Partners</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item ms-2">
        <a class="btn mt-1 btn-bold" href="#">Donate</a>
      </li>
    </ul>
  </div>
</nav>

理论上，我正在使用带有以下 gem 的 Bootstrap 5.0.1：

# RAILS GENERATED STUFF
gem 'rails', '~> 6.1.3', '>= 6.1.3.1'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 5.0'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'

# ESSENTIALS
gem 'bootstrap', '~> 5.0.1'

这是我的application.js：

import Rails from "@rails/ujs"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
ActiveStorage.start()


//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require bootstrap

//= require popper
//= require activestorage
//= require font_awesome5
//= require tinymce

window.jQuery = $;
window.$ = $;

下拉菜单不起作用。

如果我在标题中添加此脚本标记，手动加载 Bootstrap 5 Alpha，则下拉菜单有效：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous">

但是，如果我使用Bootstrap 文档中的 cdn 链接在完全相同的位置手动加载 Bootstrap 5.0.2 ，它就不起作用。这是非常神秘的。

我现在已经把它贴在一起了，但我真的很想让 Bootstrap 使用实际的资产管道工作。

任何 Rails 6 向导都可以看到我哪里出错了吗？

标签： ruby-on-railstwitter-bootstrap