2017-09-08 17 views
0

ブートストラップの小さな画面用のパディングを上書きしようとしています。これは、達成したいと思うものに対して余分なスペースを作成するためです。私のCSSデリートはなぜ無視されますか?

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

(bootstrap.cssから:1607) Chromeのインスペクタは私にこれを示しています。

私の記憶が正しければ、より細かな宣言は一般的なものを上書きするので、私は私が(小さな画面のメディアクエリーに埋め込まれた)div .col*の宣言をやると思った:

@media screen and (max-width: 600px) { 
    div .col-lg-1, div .col-lg-10, div .col-lg-11, div .col-lg-12, div .col-lg-2, div .col-lg-3, div .col-lg-4, div .col-lg-5, div .col-lg-6, div .col-lg-7, div .col-lg-8, div .col-lg-9, div .col-md-1, div .col-md-10, div .col-md-11, div .col-md-12, div .col-md-2, div .col-md-3, div .col-md-4, div .col-md-5, div .col-md-6, div .col-md-7, div .col-md-8, div .col-md-9, div .col-sm-1, div .col-sm-10, div .col-sm-11, div .col-sm-12, div .col-sm-2, div .col-sm-3, div .col-sm-4, div .col-sm-5, div .col-sm-6, div .col-sm-7, div .col-sm-8, div .col-sm-9, div .col-xs-1, div .col-xs-10, div .col-xs-11, div .col-xs-12, div .col-xs-2, div .col-xs-3, div .col-xs-4, div .col-xs-5, div .col-xs-6, div .col-xs-7, div .col-xs-8, div .col-xs-9 {padding-left: 5px; padding-right: 5px;} 
} 
head

最初にBootstrap.min.cssをロードし、次に.css-Fileをロードします。インスペクタでdivを見ると、「スタイル」タブにはまだ私のものではなく、ブートストラップ宣言が適用されていることが表示されます。私は間違って何をしていますか?

更新:コメントの提案に続いて、私は追加しました!重要 - 助けませんでした。 .css-Fileがロードされ、InspectorのソースでChequedされていることを確認しました.Tabファイルがアクティブだったことを示します。だから私はvalidated my CSSとそれは/*の代わりに//とのコメントを書いていたので、パーサーエラーを引き起こしたいくつかの疲れた貧しい人々(私はできない?

+0

追加できますか!あなたはCSSフィールドにとって重要ですか?それが動作しない場合は、おそらくあなたのCSSはすべて読み込まれていない? tsクラスのファイル名と参照を貼り付けることはできますか? – ronenmiller

+0

あなたが試みることができるのは、それぞれのスタイルに '!important'を追加することです。 – cbolgiano

+4

それは動作するはずです。しかし、あなたもdivを必要とすべきではありません。つまり、コードをコピーして貼り付けてテストしたところ、CSSのリンクに問題がある可能性があります。 –

答えて

1

私は私のコメントで言ったことを少し拡大します。

これはそのまま動作するはずです。コードをコピーして貼り付けてテストしたところ、動作しましたか、CSSへのリンクに問題がありますか?

さらに具体的にすると、同じ量の特異性があればCSSを上書きすることができますが、それでも機能します。

body { 
    background: blue; 
} 

body { 
    background: red; 
} 

/* background is red */ 

ブートストラップのものを上書きする場合にも同じことが適用されますが、同じ量の特異性があり、あなたが金色であることを確認してください。

あなたの生活が楽になるように、セレクタをもっと短くすることもできます。

div[class^='col'] { 
    padding-left: 0; 
    padding-right: 0; 
} 

これは属性セレクタを使用するため、属性がすべてcolで始まるすべてのdivが使用されます。 =だけを使用すると、完全一致の場合にのみ機能し、^=はそのすべてで始まることを意味します。

関連する問題