Навбар из бутстрапа не открывается

Я внедрил загрузчик в свое приложение ruby ​​on rails, в котором есть навигационная панель. При работе с сервером на панели навигации в сжатом браузере (или на мобильном устройстве) отображается кнопка меню «Гамбургер». Проблема в том, что эта кнопка не выполняет никаких действий в моем приложении и не отображает остальную часть параметра панели навигации.

Gemfile

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

ruby ƈ.6.5'
gem "passenger"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
#gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
#gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker'
# 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' 
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'figaro'

#Boostrap web design framework gem
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'
gem 'popper_js'
gem 'sass-rails'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
 # Call 'byebug' anywhere in the code to stop execution and get a debugger console
    gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
 # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'
   gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
    # Adds support for Capybara system testing and selenium driver
    gem 'capybara', '>= 2.15'
    gem 'selenium-webdriver'
    # Easy installation and use of web drivers to run system tests with browsers
    gem 'webdrivers'
 end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

_navbar.html.erb

<html lang="en">
 <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <div class="container-fluid">
        <a class="navbar-brand" href="/">  </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-  target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsingNavbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item <%= 'active' if params[:controller] == 'home' %>">
          <a class="nav-link" href="/">Home </a>
        </li>
        <li class="nav-item <%= 'active' if params[:controller] == 'contact' %>">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item <%= 'active' if params[:controller] == 'pricing' %> ">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item <%= 'active' if params[:controller] == 'shop' %> ">
          <a class="nav-link">Shop</a> 
        </li>
      </ul>
    </div>
  </div>
</nav>

application.scss

@import "bootstrap";

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

application.html.erb

<!DOCTYPE html>
 <html>
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="generator" content="">
  <title></title>
 </head>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

  <body>
<%= yield %>
  </body>
 </html>

index.html.erb

<%= render "layouts/navbar"  %>

Всего 1 ответ


Не совсем вопрос рельсов, но ваш HTML неисправен:

у вас есть data- target в вашей кнопке. Удалить пробелы.


Есть идеи?

10000