如何覆盖引导程序?

Question

1. bootstrap3 和自定义 css 文件都是从 静态目录。
2. 引导程序在自定义 css 文件之前加载。
3. 当引导链接被注释掉时，自定义 css 规则适用，从而证明自定义 css 路径是正确的。
4. 当同时加载引导和自定义 css 时，大多数自定义 css 规则不适用，例如更改导航栏的颜色。
   • 我已经能够使一些自定义 css 规则工作，但不确定如何工作。有些规则很好用，有些则不然。我想这些规则与引导规则并不矛盾。
5. 已尝试id标签、类标签！重要，但问题仍然存在。

有什么解决办法吗？我做错了什么？

原始代码太长，我做了一个简短的例子(这次，使用Bootstrap CDN链接(：

#navbar_test {
background-color: red !important;
color: blue;
}
#text_test {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav id="navbar_test" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
<p id="text_test">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

似乎在导航栏中更改背景的关键与.navbar-default上的background-image渐变有关。如果none应用于该属性，则应获得所需的效果。

.navbar-default{
background-color: red;
background-image: none;
}

其他覆盖应该正常工作，就像您在文本颜色更改中看到的那样。

演示

Answer 2

您可以在自定义 CSS 文件中使用 ！important 覆盖某些元素中的引导 CSS，如下所示：

element {
background-color: red !important;
}