html - Bootstrap 是否覆盖了 Ruby on Rails 4 网站中的自定义 CSS？

Question

我用了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>

但是，输入不会并排显示。如果我删除 inputs 类中的 form-control，它确实有效。我检查了 chrome，基本上过滤器类的 display:inline-block 被 bootstrap form-control 划掉了。

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

我看了又看，但我找不到在 Bootstrap css 之后加载我的 css 的方法(如果我什至对这种困惑的根源不以为然)

希望能帮到你。提前致谢!

Answer 1

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

p { color: blue; }

p { color: red; }

将生成红色文本。

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

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

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