【问题标题】:Rails navbar color not changing completely BootstrapRails 导航栏颜色没有完全改变 Bootstrap
【发布时间】:2015-03-03 03:37:00
【问题描述】:

我是 Rails 的新手,到目前为止,我一直在尝试更改导航栏的颜色。 我已经阅读了有关该主题的几乎所有内容,但我还没有看到类似我的案例的任何内容。 正如你在图片中看到的那样,导航栏变成了我想要的颜色,但由于某种原因,角落仍然是黑色的,而且我的下拉菜单的背景仍然是黑色的。

我不能上传图片,因为我是新来的。 github 存储库位于https://github.com/nanurbina/janus.git 我希望有人能帮我一把。

这是我在 _navigation.html.erb 上的代码

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <%= link_to 'Janus BPO', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <%= render 'layouts/navigation_links' %>
  </ul>
</div>

以及css.scss上的代码

  @import "bootstrap-sprockets";
  @import "bootstrap";
.navbar-brand {
  font-size: inherit;
  background-color:#2d246d;
  border-color:#2d246d;
  color:#2d246d;
  }
 .navbar-collapse
    {
    background-color:#2d246d;
    border-color:#2d246d;
    color:#2d246d;
     }
.navbar-inverse .container {
   background-color:#2d246d;
   border-color:#2d246d;
   color:#2d246d;
   }

谢谢!

【问题讨论】:

  • 很难理解你在这里想要做什么。为什么所有三个 CSS 规则的所有颜色(背景、边框和文本)的值都相同?

标签: css ruby-on-rails twitter-bootstrap navbar


【解决方案1】:

在您的 html 中将 navbar-inverse 替换为 myNavbar 并将以下内容添加到您的 CSS:

.myNavbar   {
    background-color: #ccc;
    color:#222;
    border: 1px solid #333;
 }

只需将颜色代码更改为您想要的即可。

【讨论】:

  • 谢谢安德鲁!它解决了角落的黑色问题。但是现在我在文本上有其他颜色,当我将鼠标悬停时等等。我更改了值但没有工作。我尝试遵循相同的逻辑(将名称更改为其他类)但没有用。只有类 navbar-brand 对更改做出响应。如果您能告知问题所在,那就太好了。
  • 将此添加到您的 CSS:.myNavbar li a { color: #FFF; } .myNavbar li a:hover, focus, active { color: #FFF; background-color: none; }
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-07-21
  • 1970-01-01
  • 1970-01-01
  • 2018-02-24
  • 1970-01-01
  • 2012-10-15
  • 2014-08-16
相关资源
最近更新 更多