Rails - 如何确保我的样式优先于 Bootstrap？

Question

我确定这是一个非常简单的问题，但我找不到直接的答案所以我想在这里问一下。

我正在使用 Bootstrap 构建网站，但希望我的自定义样式优先于 Bootstrap 的样式。

我想这可能就像调整我的 application.css.scss 文件中的顺序一样简单，但我的修补还没有找到解决方案。

目前该文件如下：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * 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";

我刚开始构建这个网站，有几个 Bootstrap 网格列，我想从其中删除填充。另一个，我添加了背景图像和高度，没问题。以下代码来自home.css.scss:

.col-md-4 {
  background: url('http://i.imgur.com/xxxxxxxxxxxx.jpg');
  height: 1000px;
} //both of which work

.col-md-8 {
  padding: 0px 0px 0px 0px;
} //which is overridden by Bootstrap's default styling

正如我所说，希望这是一个真正简单的解决方案，不会花费太多精力来回答。感谢任何帮助！史蒂夫

Answer 1

您可以使用 !important 。它说什么； 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

p {
    color: red !important;
}
#thing {
    color: green;
}

<p id="thing">Will be RED.</p>

例如：Demo

参考：Here

Answer 2

使用@BroiSatse 的出色 link 得出答案：http://vanseodesign.com/css/css-specificity-inheritance-cascaade

因为 Bootstrap 和我的代码都引用了 class .col-md-8，Bootstrap 的样式因其在级联中的定位而优先。

通过将 @import "bootstrap-sprockets"; @import "bootstrap"; 从 application.css.scss 移动到 home.css.scss 的顶部，然后我的样式优先。一切正常！感谢大家的帮助。

Rails - 如何确保我的样式优先于 Bootstrap？

Rails - How do I ensure my styles take precedence over Bootstrap?

html

css

ruby-on-rails

asset-pipeline

twitter-bootstrap