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 中明确执行此操作时，这里要注意的另一件事：

@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

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

使用例如：

<header class="navbar navbar-fixed-top">
于 2013-05-29T05:34:43.667 回答
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 回答
0

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

于 2013-04-07T17:53:48.613 回答
0

我将 !important 添加到 body 的 font-family 并解决了我的问题。

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

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

当我取消选中字体系列：“Helvetica Neue”时，我看到了我的字体，所以我知道我的自定义字体的资产管道工作正常。

前置 !important 似乎解决了我的问题。

body {
  font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important;
}
于 2016-11-20T00:26:05.553 回答