Bootstrap: не удается стилизовать элементы панели навигации

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я использую навигацию Bootstrap: она имеет следующую структуру:

 <nav class="navbar navbar-inverse">

        <!--<div class="container">
             <a class="navbar-brand" href="#">SOME TITLE</a>
        </div>-->

        <div class="navbar-header" align="center">
            <a class="navbar-brand shortcuts" href="#">Subtitle</a>
        </div>

        <ul class="nav navbar-nav mine lis">
                                    
               <li><a href="second.jsp">Link1</a></li>
                                    
                                    
               <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">List of links</a>
                                    
                     <ul class="dropdown-menu">
                              <li><a href="#">SLink1</a></li>
                              <li><a href="#">SLink2</a></li>
                     </ul>
               </li>

               <li><a href="#">Link3</a></li>
   

     </ul>
</nav>

И у меня есть основной документ, который включает в себя навигацию:

      <body>
       <header>
                <jsp:include page="header.jsp"/>
                <jsp:include page="navbar.jsp"/>
       </header>  
       ...

Мне нужно добавить дополнительный стиль к ссылкам навигации, поэтому я попытался:

 <style>
     a {color:red;}
    
</style>

 <style>
      .navbar a {color:yellow;}
</style>

Но ни то, ни другое не работает! В чем проблема?

РЕДАКТИРОВАТЬ: <style>..</style> часть включена <html><head>...</head> .

1. вы пробовали использовать !imporant ?

2. Чтобы переопределить базовый css bootstrap, вы должны использовать !важно, как сказал Марко.

3. Большое спасибо! Это сработало для меня, я не знал об этом, сделайте ответ, и я отмечу его как решаемый.

4. @Marko дайте ответ, чтобы op мог принять. рабочая скрипка jsfiddle.net/bg7fh21L

5. @parsecer но имейте в виду, что нужно ! важно только тогда, когда ему нужно больше всего, иначе старайтесь избегать !важно.

Ответ №1:

Как мы упоминали в комментариях, вам необходимо переопределить css bootstrap, поэтому using !important применяет новые правила CSS и отвечает на ваш вопрос 🙂

Кроме того, убедитесь, что вы не используете тег !important слишком часто, это не очень хорошая практика

Ответ №2:

Проблема в том, что bootstrap использует следующий CSS для оформления ссылки:

 .navbar-inverse .navbar-nav>.active>a

Ваш CSS пытается перезаписать это, но это не удается, потому что он имеет более низкую спецификацию.

Чтобы исправить это, вы могли бы:

Измените свои стили, чтобы они были более конкретными
Внесите изменения в сам bootstrap (у них есть доступный настройщик

Ответ №3:

Если вы хотите переопределить класс начальной загрузки, просто добавьте class или id в свой родительский контейнер и добавьте к нему префикс ваших стилей, этого должно хватить. CSS всегда выбирает наиболее конкретный доступный селектор, если они совпадают, тогда он принимает последний вариант