`twitter-bootstrap-rails` gem已成功安装但尚未呈现样式？

Question

我已经添加到gemfile，已安装捆绑软件和捆绑更新twitter-bootstrap-rails宝石和我需要的所有依赖项宝石按here，但我的布局文件中没有任何样式文件呈现？任何人都可以看到我做错了什么或者我是否错过了一个重要的需求？

的Gemfile

source 'https://rubygems.org' 

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '4.2.1' 
# Use postgresql as the database for Active Record 
gem 'pg' 
# Use SCSS for stylesheets 
gem 'sass-rails', '~> 5.0' 
# Use Uglifier as compressor for JavaScript assets 
gem 'uglifier', '>= 1.3.0' 
# Use CoffeeScript for .coffee assets and views 
gem 'coffee-rails', '~> 4.1.0' 
# See https://github.com/rails/execjs#readme for more supported runtimes 
# gem 'therubyracer', platforms: :ruby 

# Use jquery as the JavaScript library 
gem 'jquery-rails' 
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks 
gem 'turbolinks' 
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
gem 'jbuilder', '~> 2.0' 
# bundle exec rake doc:rails generates the API under doc/api. 
gem 'sdoc', '~> 0.4.0', group: :doc 

gem 'devise' 

gem "therubyracer" 

gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS 

gem "twitter-bootstrap-rails" 

group :development, :test do 
    # Call 'byebug' anywhere in the code to stop execution and get a debugger console 
    gem 'byebug' 

    # Access an IRB console on exception pages or by using <%= console %> in views 
    gem 'web-console', '~> 2.0' 

    # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 
    gem 'spring' 

    gem 'rspec-rails' 
end 

group :test do 

    gem 'capybara' 

    gem 'pry-rails' 

    gem 'shoulda-matchers', github: 'thoughtbot/shoulda-matchers' 

end 

样式表/ application.css：

/* 
    * This is a manifest file that'll be compiled into application.css, which will include all the files 
    * listed below. 
    * 
    * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
    * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
    * 
    * You're free to add application-wide styles to this file and they'll appear at the bottom of the 
    * compiled file so the styles you add here take precedence over styles defined in any styles 
    * defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
    * file per style scope. 

    *= require bootstrap_and_overrides 
    *= require_tree . 
    *= require_self 
*/ 

样式表/ bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap"; 

// Set the correct sprite paths 
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png"); 
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png"); 

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines) 
@fontAwesomeEotPath: font-url("fontawesome-webfont.eot"); 
@fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix"); 
@fontAwesomeWoffPath: font-url("fontawesome-webfont.woff"); 
@fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf"); 
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular"); 

// Font Awesome 
@import "fontawesome/font-awesome"; 

// Glyphicons 
//@import "twitter/bootstrap/glyphicons.less"; 

// Your custom LESS stylesheets goes here 
// 
// Since bootstrap was imported above you have access to its mixins which 
// you may use and inherit here 
// 
// If you'd like to override bootstrap's own variables, you can do so here as well 
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation 
// 
// Example: 
// @link-color: #ff0000; 

Javascript角/ application.js中

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require twitter/bootstrap 
//= require_tree . 

个

布局/ application.html.erb：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Odot2</title> 
    <!-- Latest compiled and minified CSS --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
</head> 

<body> 

    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Odot2</a> 
     </div> 

     <div class="user-links collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <% if user_signed_in? %> 
      <li role='presentation'><%= link_to('Logout', destroy_user_session_path, 
       :method => :delete) %></li> 
      <li role='presentation'><%= link_to('Edit registration', 
       edit_user_registration_path) %></li> 
      <% else %> 
      <li role='presentation'><%= link_to('Login', new_user_session_path) %></li> 
      <li role='presentation'><%= link_to('Register', new_user_registration_path) %></li> 
      <% end %> 
     </ul> 
     </div> 

    </div> 
    </nav> 

    <div class="flash panel"> 
    <% flash.each do |type, message| %> 
     <div class='<%= build_alert_classes(type) %>'> 
     <%= message %> 
     </div> 
    <% end %> 
    </div> 

    <main> 
    <div class="container-fluid"> 
     <%= yield %> 
    </div> 
    </main> 
</body> 
</html> 

Answer 1

我使用的引导，青菜宝石，它工作正常。

gem 'bootstrap-sass' 

//= require bootstrap 

，然后在一个名为 “Bootstrap_and_customization.css.scss” 的文件，我有：

@import url(http://fonts.googleapis.com/css?family=Lato:400,700); 
@import 'bootstrap-sprockets'; 
@import 'bootstrap'; 
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");