Question

我只是试图使用bootstrap覆盖默认导航栏的默认颜色，我之前做了很多次，但它只是一直显示默认颜色，我想知道我是否做了一些愚蠢的事，其他人可能是能发现吗？

非常感谢任何帮助。

HTML：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="style/site.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

.navbar-default {
    background-color: #900000;
}

Answer 1

最简单的方法是使用父/子选择器覆盖BootStrap的样式，如下所示：

我假设你可以在树的上方使用一个元素：

<div class="wrapper">
      <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html">About</a></li>
                </ul>
            </div>
        </div>
    </div>
 </div>

然后按如下方式定位：

.wrapper .navbar-default {
    background-color: #900000;
    background-image: none;
}

这是由于特异性定律：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

还要确保在BootStrap＆＃39; s之后加载自定义CSS文件

编辑：如果您的网页上有一个附加到<body>标记的类：

<body class="standard">

你甚至可以使用它......

.standard .navbar-default {
        background-color: #900000;
        background-image: none;
    }

Answer 2

我认为背景图片导致了问题，请尝试仅设置主要背景属性：

.navbar-default {
  background: #900000;
}

Answer 3

只需改变你的课程

.navbar-default {
    background-color: #900000 !important;
    background-image: none;
}

Answer 4

.navbar-default {
    background-color: #900000 !impotant;
}

Bootstrap导航栏背景颜色未覆盖

4 个答案: