bootstrap4 alpha3 js汉堡包菜单或模式在Rails 4中不起作用

Question

I am trying to get the hamburger menu working in rails 4 with bootstrap 4. The menu shows however, the dropdown portion of it is not working.I check other post on this matter to no avail.

navabarFile

<%# 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 %>   

application.js

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

Answer 1

A Bootstrap 4 ruby gem for Ruby on Rails (Sprockets) and Compass is available at: https://github.com/twbs/bootstrap-rubygem

Add bootstrap and autoprefixer to your Gemfile, see also 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

Run bundle install .

Import Bootstrap styles in app/assets/stylesheets/application.scss:

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

Add the Bootstrap Javascript plugins, tether and jQuery to your app/assets/js/application.js file:

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

autoprefixer

Create a app/assets/stylesheets/browserslist, which contains the following browsers:

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

See also: https://github.com/twbs/bootstrap-rubygem/pull/30