Twitter bootstrap sass 在某些页面上不起作用答案

【问题标题】：Twitter bootstrap sass not working on some pagesTwitter bootstrap sass 在某些页面上不起作用
【发布时间】：2014-01-14 01:26:02
【问题描述】：

我已经安装了 bootstrap-sass gem，我发现 css 在某些页面上工作而不是在其他页面上工作，我不确定为什么会这样。下面我已经包含了它不工作的视图，Gemfile和样式表。

宝石文件：- 源'https://rubygems.org'

gem 'rails', '3.2.13'

gem 'pg', '~> 0.15.1'
gem "bcrypt-ruby", '~> 3.0.1' 
gem "paperclip", '~> 3.4.2'
gem "will_paginate", '~> 3.0.4'
gem "friendly_id", '~> 4.0.9'
gem 'stripe'

group :assets do
 gem 'sass-rails',   '~> 3.2.3'
 gem 'coffee-rails', '~> 3.2.1'
 gem 'bootstrap-sass', '~> 2.3.2'
end

group :test do
 gem 'rspec-rails', '2.13.2'
 gem 'factory_girl_rails', '~> 4.2.1'
 gem 'capybara', '~> 2.1'
 gem 'launchy', '~> 2.3'
 gem 'guard-rspec', '~> 3.0.1'
 gem 'shoulda-matchers', '~> 2.1'
 gem 'webmock'
end

group :development do
 gem 'annotate', ">=2.5.0"
end

group :test, :development do
 gem 'database_cleaner'
 gem 'rspec-rails', '2.13.2'
 gem 'guard-rspec', '~> 3.0.1'
 gem 'rb-fsevent', :require => false if RUBY_PLATFORM =~ /darwin/i
 gem 'fuubar', '~> 1.1.1'
 gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails', '~> 3.0.1'

application.css.scss:-

 *= require_self
 *= require_tree .
 */
 @import "bootstrap";

baskets.html.erb

<p><%= notice %></p>

<p><%= @basket_items.product_totals %><p>

<%= button_to "Purchase products", new_payment_path, :class => "btn" %>

<table class="table table-hover">
 <tr>
  <th>Picture</th>
  <th>Name</th>
  <th>Price</th>
  <th></th>
</tr>
<tr>
  <% @basket_items.each do |item| %>
    <td><p>Nothingness</p></td>
    <td><p><%= item.product.name %></p></td>
    <td><p><%= item.product.price %></p></td>
    <td><%= button_to 'Remove', basket_item_path(item.id), :method => 'delete', :confirm    => 'Are you sure?', :class => "btn" %></td>
  <% end %>
 </tr>
</table>

分类显示 show.html.erb

<button type="button" class="close" data-dismiss="alert">&times;</button>
<p><%= flash[:notice] %></p>

<div class="search">
 <%= form_tag(search_path, method: "get", :class => "form-search") do %>
 <%= text_field_tag(:query, nil, :class => "input-medium search-query") %>
 <%= submit_tag("Search", :class => "btn") %>
<% end %>
</div>  

<div class="container-fluid">
<div class="row-fluid">
<% @cp.each do |p| %>
  <div class="product"> 
    <div class="product-image">
      <%= image_tag p.image %>
    </div>
    <p><%= p.price %></p>
    <p><%= link_to p.name, product_path(p.slug) %></p>
<% end %>
</div>
</div>
</div>

categories.css.scss

.product {
  display: inline-block;
 }

.product-image {
  width: 40px;
  height: 50px;
 }

.row-fluid {
margin-top: 300px;
 }

.search {
  margin: 100px 10px 0px 0px;
 }

【问题讨论】：

具体是什么“不工作”？您应该使用 Google Chrome 之类的开发人员工具来检查任何错误消息并查看源代码以查看 Bootstrap 的 CSS 是否存在。你试过提神吗？在使用标准 Rails 服务器进行开发时，资产将不时在页面加载时出现 404。
按钮、表格等引导组件...我尝试多次刷新它。我查看了谷歌浏览器检查元素工具，我可以在网络选项卡下看到并非所有资产都被加载，例如导入引导程序的 application.css

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

如果您可以比“不工作”更具体，这会有所帮助，但通常如果资产未正确加载或显示的是旧版本的资产，则很有可能您忘记了预编译资产。

尝试运行bundle exec rake assets:precompile，然后重新加载页面。

【讨论】：

它不起作用我的意思是，当我设置例如 button_to 以具有类 btn 或来自引导程序的表时，他们不会在某些页面上使用 twitter-bootstrap css，我是不知道为什么其他页面有 twitter bootstrap 工作。我已经尝试过 bundle exec rake assests:compile 并且它们没有显示在我的开发环境中。
在元素中我根本看不到任何 CSS 加载，可能是什么原因？因为它在其他页面上运行良好。

【解决方案2】：

我遇到了类似的问题。对我来说，这是因为我的供应商目录中有一个 assets 文件夹，并且其中有一个 stylesheets 文件夹。我假设 rails 检查了这些文件夹的引导程序，因为它们存在而不是导入引导程序 gem？一旦我删除了它们，它就完美地工作了。

【讨论】：