Rails Bootstrap 2.3.1 导航栏颜色答案

【问题标题】：Rails Bootstrap 2.3.1 Navbar ColorRails Bootstrap 2.3.1 导航栏颜色
【发布时间】：2013-04-30 15:22:26
【问题描述】：

我已经尝试了几个小时，但我不知道如何在我的 rails bootstrap 项目中更改导航栏颜色和导航栏文本颜色。我已经在一些 css 文件中阅读了有关 .navbar-inner 的信息，但我在任何文件中写入的内容似乎都没有任何效果。也许是因为更新版本的引导程序？有人可以给我一步一步的解决方案吗？

我尝试更改“bootstrap_and_override.css / .css.less”文件，但什么也没发生。我是否必须编译 .css.less 文件或类似的东西？非常感谢！

如果相关，这是我的 gemfile：

source 'https://rubygems.org'
ruby '2.0.0'

gem 'rails', '3.2.13'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'


gem 'bcrypt-ruby', '3.0.1'
#gem 'bootstrap-sass', '2.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

gem 'json'

group :development do
    gem 'sqlite3'
end

group :production do
    gem 'pg'
    gem 'coffee-rails', '~> 3.2.1'
    gem 'uglifier'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier'
  gem 'therubyracer'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

end

gem 'jquery-rails'

【问题讨论】：

您是否在包含 twitter 引导文件之前设置了这些值？
不，我没有。此评论的长度必须至少为 15 个字符...
您是否尝试过覆盖 CSS 中的默认 .navbar-inner 和 .navbar .nav > li > a 以更改导航栏及其文本的颜色？
不，我只是尝试更改 .navbar-inner。我查看了 chrome 中引导程序的 css 并更改了那里的颜色。事实证明，.navbar-inner 有一个渐变，这是正确的，但是当我尝试在我的 css 文件中更改它时，没有任何改变。我必须更改您上面列出的所有内容吗？
但是 CSS 条目会被渲染？

标签： css ruby-on-rails twitter-bootstrap less

【解决方案1】：

您必须按照此处的说明自定义变量： http://getbootstrap.com/2.3.2/customize.html#variables

具体来说，将其放在您用作 yourstylefile.css.sass 的任何文件下的资产文件夹的样式表部分中。

$navbarBackgroundHighlight: coloryouwant; /* This changes the nag background color */
$navbarText: coloryouwant; /* This changes the text color */

*确保此代码出现在您的引导程序的@imports 上方。为了安全起见，最好将其粘贴在 yourstylefile.css.sass 的最顶部。

【讨论】：