在我的Rails应用程序中加载我的引导-sprokets.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 .所有这些的最终问题是我的移动导航无法工作。下面是_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加载的一个问题(您可以在这里看到这个帖子),但实际上它加载得很好,就像可以看到的这里一样。
编辑:,值得注意的是,我使用的是CreativeTime.com中的Material模板。不确定这样做是否会扰乱资产管道加载文档的方式。以下是我导入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发布于 2018-01-13 03:28:27
实际上,我已经加载了两次引导链轮,这导致javascript自身撤消(例如,移动导航条应该在转到另一个页面时折叠起来,而是折叠起来,然后打开它--因为JS运行了两次)。
Moral:检查以确保您的文件井然有序。
https://stackoverflow.com/questions/45842496
复制相似问题