底部更新，请先阅读（首先阅读更新，其他所有内容都不相关
问题：我的导航栏折叠不会折叠。
我在这里显然做错了，因为导航栏折叠一旦打开就不会关闭。代码方面还可以，但是我仍然找不到问题所在。我还需要下载一些额外的东西吗？从bootstrap 4 docs的外观来看，它具有包容性吗？
我在网站的其他区域使用折叠来折叠手风琴，但是对于我的导航栏却无法使用。我的导航栏中的模式也有效，并且取决于引导程序
添加时：（这已经在我的默认布局的正文中，我什至尝试将其放在头部）
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
我脑子里也已经有这个了
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
它仍然无法在以下代码上运行：
查看导航栏：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav navbar-right">
<% if user_signed_in? && current_user.seller? %>
<li id="nav-item-b"><%= link_to "Dashboard", '/dashboard' %>
</li>
<% elsif user_signed_in? %>
<li id="nav-item-b"><%= link_to "Dashboard", '/c/dash' %>
</li>
<% end %>
<% if user_signed_in? %>
<li id="nav-item-b"><%= link_to "Sign Out", destroy_user_session_path, method: :delete %>
</li>
<% else %>
<li class="nav-item-2">
<button type="button" class="btn ripple-effect btn-info btn-lg" id="myBtnSignIn">Sign Up/Login</button>
<div class="modal fade" id="SignInModal" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h2>Login</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="form-group">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in", class: "btn btn-success" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
// $('.nav a').on('click', function(){
// $('#collapsibleNavbar').click(); //bootstrap 4.x
// });
$(document).ready(function () {
$(".navbar-nav li.trigger-collapse a").click(function(event) {
$("#collapsibleNavbar").collapse('hide');
});
});
</script>
此外，导航右类不会将链接放在右侧，而是保留在左侧。
代码没有错，可能会丢失一些东西，但是我正确安装了bootstrap 4，其他所有的bootstrap项目（例如手风琴）都可以正常工作。我不确定，因为所有其他引导项都可以正常工作，例如模式，手风琴，卡片等。
application.js ：
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require Chart.bundle
//= require chartkick
我还需要添加其他内容以使其正常工作吗？
即使我使用boostrap通用代码：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
它仍然无法工作
我的gem文件：
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'sprockets'
以下是我的布局中的更多代码段：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Anton|Bungee|Fjalla+One|Mukta|Muli|Noto+Sans|Pacifico|Poppins|Quicksand|Raleway|Righteous|Roboto|Roboto+Condensed|Roboto+Mono|Satisfy" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= render 'layouts/navbar' %>
更新：
我删除后：
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
它起作用了……这有多重要，我在那里还能做什么？