Bootstrap 自定义 CSS 不会覆盖 Bootstrap

Question

我想要实现的是我有一个自定义文件应该覆盖默认 bootstrap css。（应该更改导航栏菜单颜色、导航栏背景等）。

P.S。我正在使用 EJS 和 Node 5.7.1.

尽管如此，我有以下代码：

<!DOCTYPE html>  
<html lang="en">  
<head>
<meta charset="utf-8">
<title>Strawberio</title>
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
   <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     <script src="/b/jquery/dist/jquery.min.js"></script>
 <script src="/c/g.controller.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/a/layout/style.css"
    <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Strawberio</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
  </head>
  <body>
  <div ng-app="stack">
   <%- body %>
  </div>
 </body>
  </html>

但是如果你看一下这一行：

 <link rel="stylesheet" href="/a/layout/style.css"

Link 标签没有结束...但是...它有效。

如果我按如下方式关闭 link 标签：

 <link rel="stylesheet" href="/a/layout/style.css">

自定义文件不会覆盖默认 bootstrap。它会加载它但不会覆盖它。

你知道为什么吗？

谢谢，亚历山德鲁 S.

Answer 1

您的 <nav> 标签未正确嵌套在 HTML <head> 标签中。将 nav 移动到 <body> 内部。 <head> 应仅包含 <title>、<style>、<meta>、<link>、<script> 和 <base>。

Answer 2

您在打开和关闭头部 body 标签时出错。您应该始终将您的内容放在 body 标签内，而不是放在 head 标签内！

<!DOCTYPE html>  
<html lang="en">  
<head>
  <meta charset="utf-8">
  <title>Strawberio</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="/b/jquery/dist/jquery.min.js"></script>
  <script src="/c/g.controller.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="/a/layout/style.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Strawberio</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
  <div ng-app="stack">
    <%- body %>
  </div>
</body>
</html>

Bootstrap 自定义 CSS 不会覆盖 Bootstrap

Bootstrap Custom CSS won't override Bootstrap

html

overriding

twitter-bootstrap