Question

bootstrap3和自定义css文件都是从本地加载的静态目录。
在自定义css文件之前加载Bootstrap。
当注释掉bootstrap链接时，会应用自定义css规则，从而证明自定义css路径是正确的。
当加载bootstrap和自定义css时，大多数自定义css规则不适用，例如更改导航栏的颜色。
- 我已经能够制作一些自定义css规则，但不确定如何。有些规则工作得很好，有些规则不合适。我想这些规则与引导规则不矛盾。
尝试 id 标记，类标记，！important ，但问题仍然存在。

任何解决方案？我做错了什么？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

更改导航栏中背景的关键似乎与(function () {...} ());上的background-image渐变相关联。如果您将.navbar-default应用于该属性，则应获得所需的效果。

none

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

DEMO

Answer 2

你可以在自定义css文件中使用！important覆盖某些元素中的bootstrap css，如下所示：

element {
   background-color: red !important;
}

如何覆盖bootstrap？

2 个答案: