我完全不明白这一点，我完全被难住了。我有引导程序、默认 css 文件，然后是单个页面 css 文件。我的 css 文件如下所示：
// Place all the styles related to the Hotel controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
//*= require_self
//*= require jquery.ui.all
//*= require bootstrap_and_overrides.css.scss
//*= require defaults.css.scss
//*= require_tree ./hotels
这是它的加载方式：
<link href="/assets/hotels.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/defaults.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/add_fonts.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/carousel.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/carousel_side_text.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/directions.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/fileuploader.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/gmaps4rails.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/index.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/hotels/specials.css?body=1" media="screen" rel="stylesheet" type="text/css" />
但是当我检查萤火虫中的一个元素时，它是：
[一堆来自 Bootstrap 的东西]
[我的默认文件中的 CSS ] <---- 被引导程序覆盖
[一堆来自 Bootstrap 的东西]
所以我不明白。我的默认设置是在引导之后加载的，但是它们被引导覆盖了。我不明白这怎么可能。
编辑添加：
这是我试图摆脱左边距的 span7 div。不幸的是，正如您所见，我的覆盖位于该块的中间。左边距：0px；正在被覆盖。
.row-fluid .span7 {
width: 57.265%;
}
bootst...?body=1 (line 6396)
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.5641%;
min-height: 30px;
width: 100%;
}
bootst...?body=1 (line 6290)
.row-fluid .span7 {
width: 57.4468%;
}
bootst...?body=1 (line 469)
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.12766%;
min-height: 30px;
width: 100%;
}
bootst...?body=1 (line 363)
.text-line-buttons {
float: left;
margin-left: 0;
text-align: left;
}
**defaul...?body=1 (line 224)
.span7 {
width: 670px;
}**
bootst...?body=1 (line 6185)
[class*="span"] {
float: left;
margin-left: 30px;
}
bootst...?body=1 (line 6141)
.span7 {
width: 540px;
}
bootst...?body=1 (line 258)
[class*="span"] {
float: left;
margin-left: 20px;