1

私はそのような問題を抱えています。プロジェクトで作業していますが、サーバーから同じファイルをコピーすると、外観が異なります。一部のBootstrapスタイルはオーバーライドされません。

作業サイトのヘッダーのスクリーンショットは次のとおりです。

コンピュータで同じプロジェクトを開いたときに表示される内容：

Firebugを調べたところ、アクティブなリンクがこのデフォルトのブートストラップスタイルを使用していることがわかりました。

  .navbar .nav > .active > a,
  .navbar .nav > .active > a:hover,
  .navbar .nav > .active > a:focus {
  color: #555555;
  text-decoration: none;
  background-color: #e6e6e6;
 -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
 -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
 box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

だから、私が見るように、それはオーバーライドされていません-なぜですか？

4

3 に答える 3

2

これを試してみてください: すべてのコンポーネントを収集するには、.scss (または .sass?) ファイルが必要です。私の場合、それは styles.scss と呼ばれます

このファイルに表示される要素の順序は重要です。変数の場合、最初のエントリが後のエントリを上書きするためです。ただし、ブートストラップ エントリの後にスタイリング (!) の変更を加えてください。

私の styles.scss ファイルは次のようになります。

// myVars
@import "myvariables"; // My vars first to overwrite

// This file is a starting point for the project
@import "bootstrap";

// Include my layout tweeks
@import "assets/layout-tweaks";
@import "assets/hero-swapper";
@import "assets/someotherelement";

// Include responsive Bootstrap styles
@import "bootstrap-responsive";
于 2012-10-10T12:53:05.533 に答える
1

ブートストラップ css と他のカスタム css を必要な順序でインポートする共通の css ファイルを実行できます。レイアウトには、この共通の css ファイルのみを含める必要があります。

于 2012-10-10T09:58:38.503 に答える
0

プロパティの複数のインスタンスをオーバーライドする必要があるため、スタイルはおそらくオーバーライドされていません。

オーバーライドしようとしているコードを提供していないため、確かなことは言えませんが、上記のコードでは、オーバーライドすることはできませんがbox-shadow、-webkit-box-shadowなど.

これは、Bootstrap の Github プロジェクトのソース LESS ファイルを使用すると、はるかに簡単に実行できます。ここでは、これを次のように定義できます。

.box-shadow(1px 1px 5px #e1e1e1);

そして、box-shadow のこれらすべてのプロパティを自動的に書き出します。

これを行う方法に関するBootstrapの指示は次のとおりです。http://twitter.github.com/bootstrap/extend.html

これを行うためにすでにセットアップされているKickstrapもあります。カスタマイズは Bootstrap とは別のレイヤーに保持されるため、ソース コード (その他の機能も) に触れる必要はありません。

于 2012-10-10T13:58:54.477 に答える