web-dev-qa-db-ja.com

テーブルスタイルをオーバーライドするユーザーエージェントスタイルシート? Twitter Bootstrap

Twitterブートストラップを使用しています。私の問題は、表のフォントサイズが間違っていることです。何らかの理由で、ユーザーエージェントスタイルシートはbootstrapテーブルスタイルをオーバーライドしています。

Twitter bootstrapページ( http://Twitter.github.com/bootstrap/base-css.html )では、すべてがもちろん正常に機能しています。

私の検査官では、次の違いがわかります。

私のページ:

CSS style for my page

Twitter bootstrapページ:

CSS style for Twitter bootstrap page

間違いなく、問題はユーザーエージェントスタイルシートがbootstrap=スタイルをオーバーライドしていることです。

私のページとTwitter bootstrap=ページでこれが異なる理由を理解できませんでした。

他のほとんどのCSSは正常に機能しています。

私のCSSインポート:

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

TwitterでのCSSインポートbootstrap page:

<link href="assets/css/bootstrap.css" rel="stylesheet">
58
Riku

私は実際に自分でこれを理解しました。私は<!DOCTYPE html>タグの記述が間違っています。したがって、この問題がある場合は、doctype宣言が正しいことを確認してください!

99
Riku

最初に<!DOCTYPE html>を宣言してもうまくいかない場合は、おそらくユーザーエージェントのスタイルシートではないでしょう。それはあなたのスタイルを上書きするBootstrapのスタイルシートかもしれません(私はこの問題を抱えていました)。スタイルシートがHTMLのafter Bootstrapのスタイルシートにリンクされていることを確認してください。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
1
bgashler1

Docs.cssもアプリケーションにインポートしてください。私がそう言わなければならないなら、あなたはTwitter Bootstrap Docsがbootstrap.cssとカスタムdocs.cssを使用していることに気付いたに違いありません。 githubパッケージから。次に、マスターcssをいじらずにdocs.cssのテーブルクラスを試してみるか、ヘッダーにDOCTYPEを追加してみてください。

<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
1
Ali Gajani

OPと同じ問題がありました。素敵な小さなテキストが欲しかったので、いくつかのユーザースタイルシートがそれを上書きして置いていました:

font-size: medium;

欲しかったとき:

font-size:8pt;

HTMLページの上部に次を配置しました。

<!DOCTYPE html>

すべてが良かったので、トップでdoctypeを宣言しないようにするのは悪い習慣でした。すべてのユーザースタイルシートが削除されました。

CSSで何をオーバーライドしているのかを発見するには、常に要素(F12)を検査することをお勧めします。正しい方法になるまで属性をオンザフライで変更および選択解除してから、CSSファイルを更新します。

ただし、ユーザースタイルシートの問題がある場合、これらの値はロックされます。

1
Rmj86

ネットワーク列のブラウザー開発ツール(F12キーを押します)でCSSが呼び出されているかどうかを確認します。

呼び出されない場合は、スタイルシートを1 rel="stylesheet" type="text/css"

それは私のために働いた。

0
Ravikumar K