我确定这是一个简单易懂的问题,但我无法找到一个直接的答案,所以我想在这里问。
我使用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
正如我所说,希望这是一个真正简单的解决方案,不会花费太多精力来回答。感谢任何帮助!史蒂夫。
答案 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)