Navbar Collapse 在 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>

application.js

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

Gemfile

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

- Bardia Pourvakil

---

你能否更具体地说明哪些部分出了问题？ - Paradox

我刚刚更新了它。 - Bardia Pourvakil

我认为在引入bootstrap-sprockets之前必须加载jQuery。 - Xavier

Answer 1

请尝试以下操作：

如果您正在使用Rails 5.1+，则还需要在此处添加jquery，因此它会像下面这样：

在application.js上进行更新，如下所示。

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

希望它能帮到你。

- fool-dev

Answer 2

将此代码添加到 application.html 文件中。

<!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

- Chrisphine

Answer 3

复制并粘贴这些内容到页面底部似乎是可行的，尽管我认为Rails的做法应该是安装jQuery gem并在application.js中引入它。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

- chrisgeeq