Question

我是Ruby on Rails的新手（我来自.NET背景），如果我不能很好地解释一些内容或者我没有包含所有需要，请耐心等待我信息。

所以我正在构建这个新的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]

只是一个FYI，我有一个资产/样式表/ bootstrap_and_overrides.css.less文件。

所以我的问题是，我的application.html.erb中没有任何Bootstrap CSS被识别。我还有一个仅包含文本的主页，该文本正在显示，但未使用＆＃34;关于我们＆＃34;来自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

Answer 1

所有内容看起来都设置正确，但请注意twitter-bootstrap-rails与Bootstrap 3.2打包在一起。

引导程序.span9后不推荐使用.span3和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的参考资料。

Bootstrap不适用于开发中的Rails 4.2.4应用程序

1 个答案: