我使用http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1在我的Rails 4网站上安装Bootstrap。基本上，我安装了gems：
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>
但是，输入不会并排显示。如果我在输入类中删除了窗体控件，它确实可以工作。我检查了chrome，基本上，过滤器类的display：inline-block被bootstrap form-control划掉了。
我不太擅长使用CSS，但据我所知，Rails正在将bootstrap的css文件放在我的后面，这导致bootstrap更加“重要”。
我看了看，但是我找不到在引导CSS之后加载我的CSS的方法（如果我什至是这种混乱的根源）
希望能对您有所帮助。提前致谢！
在CSS中，稍后出现在同一样式表中或稍后在html中加载的其他样式表中出现的规则将覆盖已经定义的相似规则。例如
p { color: blue; }
p { color: red; }
将产生红色文本。
您@import的引导语句由该require_self行之后出现的require_tree .行引用。结果，引导css将出现在已编译样式表的末尾，并使用相同的选择器覆盖所有规则。
使用sass时，建议您不要使用链轮，因为它实际上无法控制源顺序，而是@import用于每个sass部分文件。
反转这两个需求行可能对您来说足够好。否则，我建议您删除@imports上方的所有链轮指令和注释，将下面的任何代码移至其自己的部分中，并以所需的确切顺序显式@import每个部分。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句