Ошибка при изменении цвета текста в Bootstrap navbar

Я пытаюсь изменить цвет текста в navbar шаблона бутстрапа и не увенчался успехом. Кто-нибудь знает, где я ошибаюсь? Вот мой код.

<!--navbar-->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner" id="nav-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Restaurant</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret">   </b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--navbar-->

CSS:

.navbar-inner {
    color: #FFF;
}

Я также пробовал это:

#nav-inner {
    color: #FFF;
}

Ответ 1

Если вы хотите изменить css для вкладок, вам нужно добавить color: #ddd; к следующему

.navbar .nav > li > a {
    float: none;
    line-height: 19px;
    padding: 9px 10px 11px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #ddd;
}

Надеюсь, это поможет!

Ответ 2

Я предполагаю, что Bootstrap определяет более конкретное правило CSS, которое выигрывает над вашим более общим правилом. Вы должны изучить страницу с помощью инструментов разработчика Firefox или Chrome, чтобы узнать, какие стили выигрывают у других. Если ваш стиль даже не отображается, тогда вы знаете, что есть более основная проблема, но если стиль Bootstrap переопределяет ваш цвет, вы должны придать вашему стилю более высокий приоритет.

Для проверки работоспособности попробуйте это правило избыточности:

html body .navbar .navbar-inner .container {
    color: #FFF;
}

И если это сработает, поэкспериментируйте с более низким уровнем специфичности, чтобы увидеть, насколько конкретно вам действительно нужно получить.

Если все остальное не работает, вы всегда можете:

color: #FFF !important;

спецификация CSS2 подробно излагает это.

Ответ 3

.navbar .nav > li > a {
    float: none;
    color: #5FC8D6;
    background-color: #002E36;
}
.navbar .nav > li > a:hover {
    float: none;
    color: #002E36;
    background-color: #5FC8D6;
}

Ответ 4

Он работает... попробуйте...

.navbar-nav > li > a:link
{
color:red;
}

Ответ 5

nav.navbar-nav.navbar-right li a {
    color: blue;
}

Работает как шарм! Нашел его в другом потоке, поэтому не беру на это благодарения.