私はこれをまったく理解できず、完全に困惑しています。ブートストラップ、デフォルトの 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" />
しかし、firebug で要素を調べると、次のようになります。
[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;