Bootstrap 正在覆盖 Ruby on Rails 4 网站中的自定义 CSS？答案

【问题标题】：Bootstrap is overriding custom CSS in Ruby on Rails 4 website?Bootstrap 正在覆盖 Ruby on Rails 4 网站中的自定义 CSS？
【发布时间】：2015-06-10 07:37:42
【问题描述】：

我使用http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1 在我的 Rails 4 网站上安装 Bootstrap。基本上，我安装了 gem：

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

然后在我的 application.css.scss 中有：

 ...* defined in the other CSS/SCSS files in this directory. It is 
 generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";

/*some css code that does work.*/

除了一个障碍之外，它运行良好。在我的

的 css 文件中

/* 
Filters
*/
#filters{
    position: relative;
}

.searchbox{
    width:100px;
}

.filter{
    display: inline-block;
}

然后在我看来，我有

<div id="filters">
    <input type="text" class="form-control filter"/>
    <input type="text" class="form-control filter"/>
</div>

但是，输入不会并排显示。如果我在输入类中删除表单控件，它确实有效。我检查了 chrome，基本上过滤器类的 display:inline-block 被引导表单控件划掉了。

我不太擅长 css，但据我所知，rails 将引导程序的 css 文件放在我的后面，这导致引导程序更加“重要”。

我看了又看，但我找不到在引导 css 之后加载我的 css 的方法（如果我什至完全了解这种混乱的根源）

希望您能提供帮助。提前致谢！

【问题讨论】：

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

【解决方案1】：

在 css 中，稍后出现在同一样式表中或稍后在 html 中加载的不同样式表中的规则将覆盖已定义的类似规则。例如

p { color: blue; }

p { color: red; }

会产生红色文字。

@import 引导语句由 require_self 行引用，该行出现在 require_tree . 行之后。因此，引导 css 将出现在编译样式表的末尾，并使用相同的选择器覆盖任何规则。

对于 sass，建议您不要使用 sprocket，因为您无法真正控制源顺序，而是对每个 sass 部分文件使用 @import。

颠倒这两条 require 行可能对您来说足够好。否则，我建议您删除 @imports 上方的所有 sprockets 指令和 cmets，将下面的任何代码移动到它自己的部分中，并按照您想要的确切顺序显式地 @import 每个部分。

【讨论】：

【解决方案2】：

确保您的自定义 CSS 在引导链接之后链接到您的 HTML。

HTML head
link bootstrap
link custom CSS

【讨论】：

是的，正如我所说，它显示为被 chrome 划掉，它在引导之前加载它（这是问题所在）。
您能否将您的头文件与其中的 CSS 链接链接起来。只更新帖子。当我可以想象它时，我更擅长提供帮助:)
头文件？什么意思？
我在想你的 html 中的。但是你说它已经在so nvm之后列出了bootstrap和custom css。

【解决方案3】：

第一：
关注Bootstrap application.css.scss order。

第二：
在控制台中按顺序运行这些命令：
rake assets:clobber（删除所有已编译的资产）
RAILS_ENV=production bin/rake assets:precompile

第三：
以生产模式重启服务器。

【讨论】：