Bootstrap 自定义 CSS 不会覆盖 Bootstrap答案

【问题标题】：Bootstrap Custom CSS won't override BootstrapBootstrap 自定义 CSS 不会覆盖 Bootstrap
【发布时间】：2016-03-10 00:51:34
【问题描述】：

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

附：我将 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 rel="stylesheet" href="/a/layout/style.css">

自定义文件不会覆盖默认引导程序。它会加载它，但不会覆盖。

你知道为什么吗？

谢谢你，亚历山德鲁 S.

【问题讨论】：

标签： html twitter-bootstrap overriding

【解决方案1】：

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

【讨论】：

【解决方案2】：

你有错误打开一个关闭头部和身体标签。你应该总是把你的内容放在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>

【讨论】：

是的，是我的ejs配置错误造成的，谢谢Andre的回复。