2015-10-04 30 views
3

4.2.4應用我是新品牌,以Ruby on Rails的(我來自一個.NET背景),如此忍受我,如果我不解釋的東西不夠好,或者我不不包括所有需要的信息。引導工作不爲Rails開發

所以我正在構建這個新的Rails應用程序,我安裝了twitter-bootstrap-rails gem,做過rails g bootstrap:install,創建了一切,現在我只是試圖開始修改視圖。 Bootstrap正在被認可的問題是什麼。

這裏是我的application.html.erb是什麼樣子:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <%= stylesheet_link_tag "application", media: 'all' %> 
    <%= javascript_include_tag "application" %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="span9"><%= yield %></div> 
     <div class="span3"> 
      <h2>About Us</h2> 
      Test text. 
     </div> 
    </div> 
</div> 

這裏是我的Gemfile:

source 'https://rubygems.org' 


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '4.2.4' 
# Use mysql as the database for Active Record 
gem 'mysql2', '0.3.20' 
# 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 
gem 'coffee-script-source', '1.8.0' 
# 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 'twitter-bootstrap-rails' 

# Use ActiveModel has_secure_password 
# gem 'bcrypt', '~> 3.1.7' 

# Use Unicorn as the app server 
# gem 'unicorn' 

# Use Capistrano for deployment 
# gem 'capistrano-rails', group: :development 

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

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

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 

而只是一個供參考的,我有一個資產/ stylesheets/bootstrap_and_overrides.css.less文件。

所以我的問題,再次是沒有引導CSS在我application.html.erb被認可。我還有一個只包含文本的主頁,這些文本正在顯示,但沒有用application.html.erb中的「關於我們」正確格式化。

這裏是樣式表/ JS包括(從源):

<head> 
    <title>Test</title> 
    <link rel="stylesheet" media="all" href="/assets/home.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" /> 
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" /> 
    <script src="/assets/jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1"></script> 
<script src="/assets/jquery_ujs.self-d456baa54c1fa6be2ec3711f0a72ddf7a5b2f34a6b4f515f33767d6207b7d4b3.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/transition.self-db278e3a8fa6249c16796b113ebd29e11ef4e2cd021618ed84895d524a4511e0.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/alert.self-ebce91ec66c71bcee451ea7da9128fd1bf8faa02c6d22ea04c598423431e4c08.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/modal.self-ab1767545e27c0dbd36971e656ae4927171f673e3d932cdec2cbef39e991952b.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/dropdown.self-8bb9309b6c24a4ba6b94026a049d25b13bdc0553b6fe83255c14a715ba624cc4.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/scrollspy.self-bd0c6724cdc75302fe98dfeff923112b76c1673cf4a0752a7050b7feea15594c.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/tab.self-7e3ee4a243bb416b5f0111a0be08f8547c5d72ba71fe4afe4a4a007f5cb4e10e.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/tooltip.self-d7f9330825307d053f68da11bb9ddc9b070df72deef3d115f2f3d55f66b17457.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/popover.self-cd672ecad3b549e1dbd89bfd044e5812d6fdade56f42d48e3acee0c3f4614526.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/button.self-ceb562de883e04359bb2c06f07bdf6ecf065cc8a5027e2e58857c5e91b0b68e3.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/collapse.self-a87553101c955a01e2e8c81fad69a16582ddbf58fe95d5eb335dde5567af7647.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/carousel.self-5d09995e01b647168888180d40e271f9a6759d68ae7ac029d7026af58813d376.js?body=1"></script> 
<script src="/assets/twitter/bootstrap/affix.self-14e04bbe71282aa039322ab93e3a3a886ddede5f59a2f365f7c861f697bbeb21.js?body=1"></script> 
<script src="/assets/twitter/bootstrap.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script> 
<script src="/assets/turbolinks.self-6fb86ff58d930b560704818c7d9e5f60d83d65b91c6778c7f7e4210d5ba82127.js?body=1"></script> 
<script src="/assets/bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js?body=1"></script> 
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 
<script src="/assets/application.self-f8806224e027f3e3f0138ea9ce99319e298dfdb323304d1f1be6eae8e8c74724.js?body=1"></script> 
    <meta name="csrf-param" content="authenticity_token" /> 
<meta name="csrf-token" content="Ty+Ax9V57UdwKpxEvS0+AubRWPpLN2m4bOgBPAFBFu5FXDGxcrTpulbWxAAROqczhy+cpckq7ltR9Tya91TC4g==" /> 
</head> 

如果有,我需要提供幫助調試此的任何其他信息,讓我知道,我會很高興提供它。

編輯 這裏是我的application.css文件:

*= require_tree . 
*= require_self 
*= require bootstrap_and_overrides 
+1

顯示您application.css文件 – Arvind

+0

如果你沒有使用寶石少的CSS。你可以使用'rails generate bootstrap:install static'。欲瞭解更多信息https://github.com/seyhunak/twitter-bootstrap-rails – akbarbin

+0

我用'軌摹引導:安裝less',像導遊說的事情。 – Blake

回答

0

一切看起來就像是設置正確,但要注意twitter-bootstrap-rails包裝與引導3.2。

.span9.span3類在Bootstrap 2.X後不推薦使用。試試這個:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-9"><%= yield %></div> 
     <div class="col-xs-3"> 
      <h2>About Us</h2> 
      Test text. 
     </div> 
    </div> 
</div> 

退房爲grids in Bootstrap 3參考。

+1

感謝您的輸入!對於我原來的問題,我發現我的問題。我在做一個「少」安裝引導程序,但沒有Gemfile中所需的gem(therubyracer,less-rails)。我之所以沒有這麼做,是因爲他們目前與Windows不兼容。當我只是做一個正常的安裝(不少於),它工作正常。所以我現在正在創建一個虛擬機,而只是在那裏做我的開發。 – Blake

+0

很高興聽到您發現問題@Blake。虛擬機聽起來像個好主意。另一個值得研究的選項可能是基於雲的環境,如Cloud9或Nitrous.io。 – Drenmi