Как изменить цвет navbar-inverse (Bootstrap)

У меня есть простой вопрос, который мне тяжело. Я создаю navbar с помощью Bootstrap, и я пытаюсь изменить его цвет, но я не могу.Как изменить цвет navbar-inverse (Bootstrap)

JSP

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

CSS

navbar-inverse { 
background-color:whatever; 
    }

Могу ли я делать ничего плохого в CSS?

источник

2017-02-16 Mike

Если ваш пример точен, то вы должны добавить **. ** (точка), чтобы указать класс. **. navbar-inverse ** и убедитесь, что ваша таблица стилей размещена после загрузки. – vanburen

Вот что по умолчанию для navbar-inverse является:

.navbar-inverse { 
    background-color: #222; 
    border-color: #080808; 
}

Что, конечно, темно, а не цвет, который вы хотите.

Таким образом, вместо использования !important по вашему пользовательскому правилу вы должны искать это правило в бутстраге css.

Запрет на то, что разместите !important по своему пользовательскому правилу, и оно должно быть отменено.

источник

2017-02-16 23:28:11 scoopzilla

Большое вам спасибо, это сработало. – Mike

navbar-inverse - это класс, поэтому вы можете называть его добавлением '. 'Перед именем класса

.navnavbar-inverse { 
    background-color:whatever !important; 
}

! Важно в пользовательском правиле переопределения любого другого правила пользовательского CSS, и теперь все должно работать нормально.

источник

2017-02-16 23:28:17

Удивительно, это сработало. – Mike

Я всегда избегаю использования !important, так как это может создать проблемы в более поздней части вашего проекта. Назначьте идентификатор вашему элементу и настройте его. Таким образом, я обычно иду с указанным ниже способом ---

#nav_bar { 
 
background-color: red; 
 
border-color: red; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      
 
      </head> 
 
      <body> 
 
      <nav id="nav_bar" class="navbar navbar-inverse navbar-static-top" role="navigation"></nav> 
 

 
      </body> 
 
      </html>

Надежда это помогает!

источник

2017-02-17 01:00:12 neophyte

ответ

Смежные вопросы