[英]Navbar Collapse not working on Rails 5/Bootstrap 3
當導航欄菜單變為下拉菜單時,訪問菜單的按鈕無響應。
我試過:
並且仍然無法弄清楚如何修復它。 這是我的代碼:
<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 'jquery-rails', '4.3.1'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
嘗試以下
如果您使用的是 Rails 5.1+,那么您還需要在此處添加 jquery,如下所示:
在application.js
更新如下
//= require rails-ujs
//= require jquery
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
希望它有幫助
將這些復制並粘貼到頁面底部似乎可行,但我認為 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>
將此添加到 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.