1

現在取り組んでいるプロジェクトのスタイルの継承に問題があります。

私が取り組んでいるプロジェクトでは、HTML5、CSS3、その他の新しい標準と機能を12年前のコードベースで使用していますが、これらは十分に維持されていません。（たとえば、この問題が発生する前は、DOCTYPEがなかったため、HTML5要素やCSS3スタイルをIEに適用できませんでした）

とにかく、目の前の問題に！作業しているシステムのメインCSSファイルのフォントスタイルは、作業しているコンテンツのスタイルを上書きしています。カスタムコンパイルされたバージョンのTwitterBootstrapを使用していて、それを多くの新しいスタイルに使用していることは注目に値します。CSSのすべての要素が.bootstrap-containerプレフィックスとして追加され、次に新しいコンテンツが追加されるようにコンパイルされています。追加はもちろん、次のようにdivでラップされます<div class="bootstrap-container"> ... </div>。

これはほとんどの部分で機能しますが、フォントサイズは特定の要素で混乱します。font-sizeBootstrapで明示的に定義されているものは、ヘッダーのように正常に機能しますが、メインのCSSファイルから使用する理由が何であれ、ヘッダーの内側にスパンを配置するとします。

問題のあるメインCSSは次のとおりです。

body, td, tr, div, p, form, input, select, textarea, font {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

現在それをオーバーライドするために機能するブートストラップCSSは次のとおりです。

.bootstrap-container * {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
}

ただし、これはもちろん別の問題を引き起こします。他の問題を修正するには、さらに多くのオーバーライドルールを指定する必要があります。

ですから、皆さんへの私の質問は、スタイルをより良い方法でオーバーライドして、使用することを意図したブートストラップをほとんど使用できるようにする方法です。方法があれば...

4

5 に答える 5

3

このような何かがトリックをするかもしれません...

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}
于 2012-09-13T12:00:38.427 に答える
3

オーバーライドをフォーム要素だけに制限しようとしましたが、それを達成するために答えを変更する必要がありました。

/*
Bootstrap over rides
*/
.container form, 
.container input, 
.container button,
.container select, 
.container textarea {
    font-size: 12px;
    padding: 1px 2px 1px 2px;
}


.container select {
    height: 24px;
}
于 2012-11-30T02:18:06.243 に答える
2

元のCSSを変更できる場合は、元のレイアウトを破棄せずにこれらの変更を行うことができるはずですが、新しいスタイルと共存させることができます。

body {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

td, tr, div, p, form, input, select, textarea, font {
    color: inherit;
    font: inherit;
}

テーブル/フォーム要素にスタイルを設定することは、スタイルを適切に継承していなかったNetscape4.xの時代からの逆戻りです。必要に応じて、おそらくそれらを破棄することもできます。

于 2012-09-13T12:17:07.380 に答える
0

ブートストラップコード全体をコンパイルして、特定の要素内でのみ機能するようにしますhttps://stackoverflow.com/a/16495195/356375

于 2013-05-11T08:24:35.363 に答える
-1

私は通常、bodyタグに#overrideのIDを付けます。

その後、私は次のようなことをすることができます

#override .bootstrap-container *{

}
于 2016-09-15T12:54:53.980 に答える