bootstrap4 alpha3 js汉堡菜单或模态在rails 4中不起作用答案

【问题标题】：bootstrap4 alpha3 js hamburger menu or modal not working in rails 4bootstrap4 alpha3 js汉堡菜单或模态在rails 4中不起作用
【发布时间】：2016-05-01 01:28:10
【问题描述】：

我正在尝试使用 bootstrap 4 让汉堡菜单在 rails 4 中工作。但是，菜单显示，它的下拉部分不起作用。我检查了有关此问题的其他帖子无济于事。

导航栏文件

<%# navbar begins %>
<nav class="navbar navbar-light" role="navigation">
<button class="navbar-toggler hidden-sm-up" type="button" data- toggle="collapse" data-target="#collapsing-navbar">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="collapsing-navbar">
<a class="navbar-brand" href="http://example.herokuapp.com/">
    <%= image_tag("greylogo.png", width: '180', height: '35', alt:'Crededx', class: "logo") %> 
  </a>
  <ul class="nav navbar-nav">
  <li class="nav-item">
    <a href="/messages" class="nav-link">Messages</a>
  </li>
  <li class="nav-item">
    <a href="/logout" class="nav-link">Logout</a>
  </li>
  </ul>
 </div>
</nav>
<%# navbar ends %>

应用程序.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap bootstrap-4

【解决方案1】：

用于 Ruby on Rails (Sprockets) 和 Compass 的 Bootstrap 4 ruby gem 位于：https://github.com/twbs/bootstrap-rubygem

将引导程序和自动前缀添加到您的 Gemfile，另请参阅 https://github.com/twbs/bootstrap-rubygem/issues/29：

gem 'bootstrap', '~> 4.0.0.alpha3'
gem 'autoprefixer-rails'
source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end

运行bundle install。

在 app/assets/stylesheets/application.scss 中导入 Bootstrap 样式：

// Custom bootstrap variables must be set or import before bootstrap itself.
@import "bootstrap";

将 Bootstrap Javascript 插件、tether 和 jQuery 添加到您的 app/assets/js/application.js 文件中：

//= require jquery
//= require tether
//= require bootstrap

自动前缀

创建一个app/assets/stylesheets/browserslist，其中包含以下浏览器：

Chrome >= 35
Firefox >= 38
Edge >= 12
Explorer >= 9
iOS >= 8
Safari >= 8
Android 2.3
Android >= 4
Opera >= 12

另见：https://github.com/twbs/bootstrap-rubygem/pull/30

【讨论】：