Question

我使用Bootstrap的navigation：它具有以下结构：

<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>中。

Answer 1

问题是bootstrap正在使用以下CSS来设置链接的样式：

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

你的CSS试图覆盖它，但它失败了，因为它有一个较低的specifity。

要修复你可以：

将您的样式更改为更具体
对引导程序本身进行更改（它们有可用的自定义程序）

Answer 2

正如我们在评论中提到的，您需要覆盖bootstrap的css，因此使用!important应用新的CSS规则并回答您的问题：）

另外，请确保您不要经常使用！important标签，这不是一个好习惯

Answer 3

如果要覆盖bootstrap类，只需将class或id添加到父容器中，并为其添加样式前缀，即可。 CSS allways选择最具体的选择器，如果它们相同，那么它需要最后一个选项

Bootstrap：无法设置导航栏元素的样式

3 个答案: