【问题标题】：How do I override the bootstrap navbar css in rails 4 using scss?如何使用 scss 覆盖 rails 4 中的引导导航栏 css？
【发布时间】：2014-08-27 07:25:51
【问题描述】：

我可以覆盖其他元素，如 body 和 jumbotron，但我对导航栏所做的任何更改都不会做任何事情。

我已确保 /public 中没有预编译资产。

我的 application.css.scss 文件是这样的：

@import "bootstrap-sprockets";
@import "bootstrap";

// ensure the body isn't overlaped by the fixed header since we're using that
body {
  padding-top: 60px;
}

.jumbotron {
  padding-top: 20px;
}

// this does nothing!
.navbar-default {
  .navbar-text {
    color: red; }
}

我做错了什么？

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap sass

【解决方案1】：

试试这样：

在样式中使用!important

并为particular class 提供navbar 的样式

    .navbar-default .navbar-brand {

    color: red !important; 

}

DEMO

【讨论】：

【解决方案2】：

使用@bootstrap-variables 自定义您的导航栏，例如：

_variables.scss：

$navbar-height:                    50px !default;
$navbar-margin-bottom:             $line-height-computed !default;
$navbar-border-radius:             $border-radius-base !default;
$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;

$navbar-collapse-max-height:       340px !default;

$navbar-default-color:             #777 !default;
$navbar-default-bg:                #f8f8f8 !default;
$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;

【讨论】：

【解决方案3】：

好吧，我现在觉得自己很蠢，但我不得不承认我的错误，以防万一其他人也犯了同样的错误，并且可以向我学习。

我没有使用 navbar-default 类，我使用的是 navbar-inverse...这就是覆盖不起作用的原因！

哇！无论如何，感谢您的答案。他们至少帮我解决了这个问题。

【讨论】：