Bootstrap4 Rails 5

Question

我关注了official guide and to no help, can someone shed some light on this? (source on github)

我的 Gem 文件：

...
#bootstrap
gem 'bootstrap', '~> 4.0.0.alpha3.1'
gem 'sprockets-rails', :require => 'sprockets/railtie'

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
...

我的application.scss:

@import 'bootstrap-sprockets';
@import 'bootstrap';

我的application.js:

//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

我的application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>DankDist</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

最后，我的 index.html.erb:

<h1>Scale#index</h1>
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<p>Hello Worldzz</p>
<p>Find me in app/views/scale/index.html.erb</p>
<%= params[:id] %> <br/>
<%= @id %>

Next Page <%= @page +1 %>

<hr/>
<%= params.inspect %>

I 运行 Bundle，re-tried rails s 没有任何变化，header 不包含任何样式。

Answer 1

有一些错误

ScaleController 包含错误布局 - 因此您在 application.html.erb 中导入的样式表不起作用
@导入'bootstrap-sprockets'； Bootstrap 4 gem

Answer 2

在 application.js 中，尝试将这两行排列如下，我注意到它对我有用：

//= require jquery
//= require bootstrap-sprockets

Bootstrap4 Rails 5

Bootstrap4 with Rails 5

ruby-on-rails

ruby

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4