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

时间:2015-03-12 11:55:21

标签: html css ruby-on-rails twitter-bootstrap asset-pipeline

我确定这是一个简单易懂的问题,但我无法找到一个直接的答案,所以我想在这里问。

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

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

2 个答案:

答案 0 :(得分:0)

使用@ 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的顶部,我的格式优先。一切都在按原样运作!谢谢大家的帮助。

答案 1 :(得分:-3)

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



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

<p id="thing">Will be RED.</p>
&#13;
&#13;
&#13;

例如:Demo

参考:Here