css - 导航栏折叠在 Rails 5/Bootstrap 3 上不起作用

Question

当导航栏菜单更改为下拉菜单时，访问菜单的按钮无响应。

我努力了:

重新排序代码

做一个 rake assets:clean

尝试使用 JS

仍然无法弄清楚如何解决它。
这是我的代码:

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="main-nav-collapse" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to root_path, class: 'navbar-brand' do %>
      <img src="https://i.imgur.com/TtTQgbx.png" alt="minilogo" class="minilogo">
      <% end %>
    </div>
    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to 'Book Club', '/bookclub' %></li>
        <li><%= link_to 'Musings', '/musings' %></li>
        <li><%= link_to 'Podcasts', '/podcasts' %></li>
        <li><%= link_to 'Resources', '/resources' %></li>
        <li><%= link_to 'Courses', '/courses' %></li>
        <li><%= link_to 'About', about_path %></li>

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

应用程序.js

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

gem 文件

gem 'jquery-rails', '4.3.1'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'

Answer 1

尝试以下

如果您使用的是 Rails 5.1+，那么您还需要在此处添加 jquery，如下所示:

在 application.js更新如下

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

希望能帮助到你