Bootstrap-sprockets.js 未加载 Rails 5

Question

我在 Rails 应用程序中加载 bootstrap-sprockets.js 文件时遇到问题。目前，这是我的 Gemfile：

ruby '2.3.4'
gem 'jquery-rails'
gem 'sendgrid-ruby'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
gem 'devise'
gem 'devise-bootstrap-views'
gem 'will_paginate', '3.1.5'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'rails', '~> 5.1.2'
gem 'bcrypt', '~> 3.1.7'
gem 'puma', '~> 3.7'
gem 'uglifier', '>= 1.3.0'
gem 'rails-controller-testing'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'

我的 application.js 文件如下所示：

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

And this is what I have on Safari

所有这一切的最终问题是我的移动导航无法正常工作。这是 _navigation.html.erb 文件（以防万一）：

<nav class="navbar navbar-primary navbar-fixed-top" id="sectionsNav">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-primary">                   <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="<%= root_path %>">List Overflow<div class="ripple-container"></div></a>
            </div>

            <div class="collapse navbar-collapse" id="example-navbar-primary">
                <ul class="nav navbar-nav navbar-right">

              <% if user_signed_in? %>
                          <li>
                           <%= link_to listings_path do %>
                             <i class="material-icons">reorder</i> Listings
                           <% end %>
                          </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <i class="material-icons">add</i> Actions
                            <b class="caret"></b>
                        <div class="ripple-container"></div></a>
                        <ul class="dropdown-menu dropdown-with-icons">
                <li><%= link_to "New Listing", new_listing_path %></li>
                <% if current_user.admin? %>
                  <li><%= link_to "New Category", new_category_path %></li>
                <% end %>
                        </ul>
                    </li>
            <% end %>

            <% if user_signed_in? %>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="material-icons">person</i><%= "(Admin)" if current_user.admin? %> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><%= link_to "Edit profile", edit_user_path(current_user) %></li>
                <li><%= link_to "View profile", user_path(current_user) %></li>
                <li><%= link_to "Log out", logout_path, method: :delete %></li>
              </ul>
            </li>
            <% else %>
            <li><%= link_to "Log in", login_path %></li>
            <li><%= link_to "Sign up", signup_path, class: "btn btn-info btn-raised btn-round" %></li>
            <% end %>

                </ul>

            </div>
        </div>
    </nav>

想看现场版的可以去listoverflow.herokuapp.com

我以前认为这是 jQuery 加载的问题（您可以在此处看到 post），但实际上加载正常 here.

编辑： 值得注意的是，我使用的是来自 creative-tim.com 的 Material Kit Pro 模板。不确定是否有什么东西弄乱了资产管道加载文档的方式。这是我导入 SCSS 的方式：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "devise_bootstrap_views";
@import "sass2/material-kit.scss";
@import "demo"; # from Material Kit
@import "vertical-nav"; # from Material Kit
@import "listings"; # Custom by me
@import "custom"; # Custom by me

Answer 1

我实际上加载了 bootstrap-sprockets 两次，这导致 javascript 自行撤消（例如，移动导航栏应该在转到另一个页面时向后折叠，但相反折叠然后取消它 - 因为 JS 是运行两次）。

道德：检查以确保您的文件井然有序。

Bootstrap-sprockets.js 未加载 Rails 5

Bootstrap-sprockets.js not loading in Rails 5

javascript

ruby-on-rails

asset-pipeline

twitter-bootstrap