Question

我试图覆盖bootstrap提供的一些默认变量，特别是一些默认的颜色和字体设置，但只有少数它们似乎正在生效。这是我的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中明确地执行此操作时：

@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。有什么我做错了或错过了吗？

感谢。

Answer 1

当我正在使用演示应用程序重现我的问题时：https://github.com/verma/bootstrap-sass-tests我重新启动了rails开发服务器。

这似乎解决了这个问题。我不确定这是否是一个永久修复，所以我会在我将这个问题标记为已回答之前等待。

Answer 2

从标题元素中的class属性中删除 navbar-inverse 样式可能会解决问题。

使用例如：

<header class="navbar navbar-fixed-top">

Answer 3

嗯，我很幸运使用它来获取字体和链接颜色：

$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 file。

中找到

Answer 4

您的application.css.scss文件是什么样的？我遇到了类似的问题，发现我有另一个样式表覆盖我的基本字体，我不想要。确保没有其他文件导致覆盖（例如scaffolds.css），并确保没有启用require_tree选项。

Answer 5

我在body的font-family中添加了！important并修复了我的问题。

上下文：我的Rails 5应用程序遇到了类似的问题，我的自定义字体（.otf）未应用。在开发人员控制台中，我看到正文字体应用为＆＃34; Helvetica Neue＆＃34;我认为是来自bootstrap-sass。

body { 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif 
...

当我取消选中font-family：＆＃34; Helvetica Neue＆＃34;时，我看到我的字体符合预期，所以我知道自定义字体的资产管道工作正常。

prepending！important似乎解决了我的问题。

body {
  font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important;
}

某些bootstrap-sass（v2.0.3）变量的自定义值无效

5 个答案: