Question

这是我在app / assets / views / elements中的导航栏代码：

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
      <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 "Pandora", defined?(root_path) ? root_path : "#", class: "navbar-brand" %>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <% if defined?(Devise) %>
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li class="divider"></li>
              <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Login", new_user_session_path %></li>
          <li><%= link_to "Sign Up", new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

但由于某些原因，当我使用此样式表来更改导航栏的颜色时，唯一改变的是字体样式...

/应用/资产/样式表

.navbar {
  text-transform: uppercase;
  margin-bottom: 0px;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000;  /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}

  .navbar-default {
    background-color: #1abc9c;
    border-color: #030033;
}

  .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
    color: #262626;
   text-decoration: none;
  background-color: #66CCFF;  /*change color of links in drop down here*/
   }

 .nav > li > a:hover,
 .nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
  }


  .navbar-default .navbar-nav > li > a {
   color: white; /*Change active text color here*/
    }



.navbar-inverse {
  padding-bottom: 70px;
  padding-top: 70px;
}

.navbar-inverse {
  background-color: #1abc9c;
  border-color: #16a085;
}

.navbar-inverse .navbar-nav > li > a {
  color: white;
}

.navbar-inverse .navbar-nav > li > a:hover {
  color: #222222;
}

.navbar-brand {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
}

.navbar-inverse .navbar-brand {
  color: white;
}

.navbar-inverse .navbar-toggle {
  border-color: transparent;
}

.progress-bar-theme {
  background-color: #1abc9c;
}

我不知道它可能是什么。

感谢您的帮助。

Answer 1

尝试使用此生成器并准备好css：

，而不是重新发明轮子

http://work.smarchal.com/twbscolor/

生成的css应该放入覆盖文件，例如bootstrap_and_overrides.css，这个文件最后包含在css清单文件（application.css）中。

*= require bootstrap_and_overrides *= require_self */

Answer 2

您可以使用以下代码自定义导航栏颜色：

 .navbar-default 
    {
      background-image: none;  
      background-color: #2196f3; 
      border-color: #1976d2;
    }

在这里，background-image:none;扮演着角色。如果您错过了该行，则会显示默认颜色（白色）的navbar-default。

更改导航栏颜色不起作用

2 个答案: