css - 更改导航栏颜色不起作用

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>

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

/应用程序/ Assets /样式表

.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 list 文件 (application.css) 中。

*= 需要 bootstrap_and_overrides *= require_self */