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

使用@ BroiSatse的优秀链接制作答案：http://vanseodesign.com/css/css-specificity-inheritance-cascaade

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

将@import "bootstrap-sprockets"; @import "bootstrap";从application.css.scss移到home.css.scss的顶部，我的格式优先。一切都在按原样运作！谢谢大家的帮助。

Answer 2

您可以使用!important。它说的是什么;这很重要，忽略后续规则，以及任何常见的特殊问题，都应用此规则！＆＃39;

＆＃13;

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

＆＃13;

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

＆＃13;

例如：Demo

参考：Here

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

2 个答案: