Laravelはブートストラップテンプレートをオーバーライドします

Question

私は自分のプロジェクトでカスタムapp.cssを手に入れました。私はブートストラップテンプレートを使用しています。今、app.cssのような新しいボタンスタイルを作成すると、どこにでもアクセスできます（マスターテンプレートを取得してから他のページにも拡張されています）。app.cssのブートストラップテーマをオーバーライドすると機能しません。 <style>タグを使用して同じコードを使用してページ上部のブートストラップをオーバーライドすると、そのタグが機能しています。 app.cssが適切に含まれていて、bootstrap.cssの後に私が間違っていることを知っていますか？

Answer 1

キャッシュの更新を試してください。私はChromeの場合、Ctrl + Shift + Rを使用しています。

これでも結果が得られない場合は、ChromeまたはFirefoxの内蔵インスペクタを使用して、編集中の要素の添付プロパティを表示します。 app.cssがbootstrap.cssをオーバーライドしている場合、app.cssがskin-purple.min.cssの上にあることを示す下の画像のように表示され、app.cssが最新のものであることを示します。

Answer 2

私はapp.css後bootstrap.cssを含めるようにしようと、階層があることを言うだろう、あなたはまた、これらのCSSを与えることができるので、同じよう!important属性：

#bla { 
    display:none !important 
} 

しかし、それはないですあなたがbootstrap.cssの多くをオーバーライドしない場合、私が思う良い習慣、それはOKかもしれ

また、これを試みることができる：

http://bootstrap-live-customizer.com/

ブートストラップをカスタマイズするには

が必要です。

Answer 3

おそらくスタイル優先度です。私はthis articleスタイルの優先順位と何が起こっているかを少なくとも理解するのに非常に便利だとわかりました特異性です。あなたの非常の場合

単に、このような

.mybutton button{ 
    color: blue; 
    font-size: inherit; 
    ... 
} 

としてクラスセレクタを使用して、ボタンの属性class="mybutton"を与えるために役立つかもしれません。クラス定義では、あなたが望むものを自由にオーバーライドしたり、ブートストラップから他のプロパティを継承させたりすることができます。

!importantルールもあります。しかし、それは普通のカスケーディングルールを破り、デバッグを非常に辛いものにするので、通常は悪い習慣と呼ばれます。