6

ブートストラップ CSS をオーバーライドする方法をネットで検索しましたが、まだ機能していません。navbarファイルを編集せずにデフォルトの色を変更しようとしていbootstrap.cssます。
ロード後に次のことを頭に入れてみましたbootstrap.css：

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

これはうまくいかなかったので、それを独自の CSS ファイルに入れてから、そのスタイルシートを次のように読み込んでみました。

ブートストラップオーバーロード.css

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

_Layout.cshtml

<link rel="stylesheet" href="Content/bootstrap.css">
<link rel="stylesheet" href="Content/bootstrapOverload.css">

それがうまくいかなかったとき、要素にカスタムクラスを追加しようとしました

_Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override -->

ブートストラップオーバーロード.css

.navbar-override {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0);
}

私は何か間違ったことをしていますか？可能であれば、これを正しい方法で行う方法を学びたいと思っています。

4

6 に答える 6

3

cssをオーバーロードするには、コードの後半にあるか、オーバーロードしようとしているcssよりも具体的である必要があります。

bodyの前に追加して、より具体的に.navbar-inner示すbody .navbar-innerようにすることもできます。あるいはdiv.navbar-inner、どこかにIDを設定するのが最善の方法です。

bootstrap.cssのように具体的に選択している場合は、ブートストラップの後にcssがロードされていないと思います。Chromes開発ツールやFirefoxのfirebugなどのツールで何が選択されているかを確認します。

于 2012-09-29T23:29:22.800 に答える
3

CSSにタイプミスがあります：

background-image: -mox-linear-gradient(top, #006633, #006633);

私はそれがすべきだと思います：

background-image: -moz-linear-gradient(top, #006633, #006633);

CSSに間違いを入力すると、残りの部分の解釈が停止するため、オーバーライドはありません。

于 2012-09-29T23:29:42.693 に答える
3

navbar の色を変更しようとして一日の大半を費やしました: [

問題は .navbar-inverse だと思います

別の .css ファイルには次のようなものが含まれている必要があり、色が変わります。

.navbar-inverse .navbar-inner {
background-color: #586214;
background-image: none;
}
于 2013-03-16T06:12:28.917 に答える
1

LESS 変数を変更することで、ブートストラップのデフォルトをオーバーライドできます。

https://getbootstrap.com/2.0.1/less.html#変数

//ナビゲーションバー

  • @navbarBackground: @Color1;
  • @navbarBackgroundHighlight: @Color1;
  • @navbarBrandColor: #FFFFFF;
  • @navbarLinkColor: #FFFFFF;
  • @navbarLinkColorHover: #FFFFFF;
  • @navbarLinkColorActive: #FFFFFF;
  • @navbarInverseBackground: #FFFFFF;
  • @navbarInverseBackgroundHighlight: #FFFFFF;
  • @navbarInverseBorder: #FFFFFF;
  • @navbarInverseLinkColorHover: @Color7;
  • @navbarInverseLinkColorActive: @Color11;
  • @navbarInverseLinkColor: @Color1;
于 2013-08-18T15:44:51.517 に答える