Блог

Выпадающее меню с использованием bootstrap 4 в панели навигации не работает. я использую rails6. gemfile и application.js приводится ниже. Bootstrap и jquery установлены правильно.

это мой gemfile:-

 source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
  

application.js файл:-

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

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .
  

Каким-то образом jquery ведет себя по-особому в rails 6. Чтобы работать правильно, мне пришлось добавить его через yarn (это другая версия jquery).

Введите это в свой терминал (каталог приложений):

 yarn add jquery popper.js
  

Затем перейдите к своему environment.js и сделайте так, чтобы это выглядело вот так:

 const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
  

Затем перейдите к своему application.js и импортировать bootstrap:

 import "bootstrap"
  

Это должно сработать