8

ブートストラップによって提供されるデフォルトの変数の一部、特にデフォルトの色とフォントの設定をオーバーライドしようとしていますが、有効になっているのはごくわずかです。私のcustom.css.scssの上部は次のとおりです。

$myOrange:#f89406;
$myBlueDark: #304269;
$myBlue: #91BED4;
$myBlueLight: #D9E8F5;
$myWhite: #eee;
$myGrayBlue: #43464C;

/* colors */
$linkColor: $myBlueDark;
$navbarBackground: $myBlueDark;
$navbarBackgroundHighlight: lighten($navbarBackground, 10);
$navbarLinkColor: darken($myOrange, 10);
$navbarLinkColorHover: $myOrange;
$bodyBackground: #000;
$dropdownBackground: $myBlueDark;
$dropdownLinkColor: $myOrange;
$hrBorder: $myBlue;
$heroUnitBackground: lighten($myOrange, 20);
$dropdownLinkColorHover: $myOrange;

/* typography */
$sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif;
$baseFontSize: 16px;

@import 'bootstrap';

// ... rest of the css ....

ここでは、いくつかのブートストラップ変数の値を指定しており、フォントが指定されたものであり、リンクの色が設定した値であると想定しています。

ただし、これらの値の一部しか機能しないことに気付きました。たとえば、ページのフォントはまだブートストラップのデフォルト (Helvetica Neue) のままですが、ナビゲーション バーの色は正しい値に変わります。

インターネットで検索しましたが、見つけた解決策はどれもうまくいきませんでした。この問題に似た問題がログに記録されましたが、その後クローズされました: https://github.com/thomas-mcdonald/bootstrap-sass/issues/102

私は先に進んでそのスレッドにコメントしますが、何かが欠けていないことを確認したかっただけです.

ここで、custom.css.scss で後で明示的にこれを行うときに、もう 1 つ注目すべき点があります。

@mixin default_font {
  font-family: "PT Sans Narrow", "Lucida Grande", sans-serif;
  font-weight: 400;
}

body {
  padding-top: 60px;
  background-color: #D9E8F5;

  @include default_font;
}

フォントは問題なく表示されます。background-color同じ問題があるため、ここで指定しています。

私はbootstrap-sass v2.0.3を使用しています。私が間違っていることや欠けていることはありますか？

ありがとう。

4

5 に答える 5

2

問題を再現するためにデモアプリに取り組んでいる間: https://github.com/verma/bootstrap-sass-tests Rails 開発サーバーを再起動しました。

これで問題は解決したようです。これが恒久的な修正であるかどうかはよくわからないので、この質問を回答済みとしてマークする前に待ちます.

于 2012-05-31T16:39:47.213 に答える
1

ヘッダー要素の class 属性からnavbar-inverseスタイルを削除すると、問題が解決する場合があります。

たとえば、次のように使用します。

<header class="navbar navbar-fixed-top">
于 2013-05-29T05:34:43.667 に答える
0

application.css.scss ファイルはどのようなものですか? 私は同様の問題に遭遇し、別のスタイルシートが私の基本フォントを上書きしていることに気付きました。これは望ましくありませんでした。オーバーライドの原因となる他のファイル (scaffolds.css など) がないことを確認し、require_tree オプションが有効になっていないことを確認してください。

于 2013-04-07T17:53:48.613 に答える
0

うーん、フォントとリンクの色にこれを使用して運が良かった:

$baseFontSize:          17px;
$baseFontFamily:        'Crete Round', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$baseLineHeight:        20px;
$altFontFamily:         'Open Sans Condensed', Georgia, "Times New Roman", Times, serif !default;

$headingsFontFamily:    'Alfa Slab One'; // empty to use BS default, @baseFontFamily
$headingsFontWeight:    normal;    // instead of browser default, bold
$headingsColor:         $blueDark;

$linkColor:             $blueDark;

使用できる変数は、_varibles.scss ファイルにあります。

于 2012-05-31T04:06:17.547 に答える