Question

我试图让汉堡包菜单在带有引导程序4的rails 4中运行。然而，菜单显示，它的下拉部分无法正常工作。我检查此事的其他帖子无济于事。

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

用于Ruby on Rails（Sprockets）和Compass的Bootstrap 4 ruby gem可在以下位置获得：https://github.com/twbs/bootstrap-rubygem

将bootstrap和autoprefixer添加到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

autoprefixer

创建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

bootstrap4 alpha3 js汉堡菜单或模态不在rails 4中工作

1 个答案:

autoprefixer