Question

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

P.S。我使用 EJS 与节点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 rel="stylesheet" href="/a/layout/style.css">

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

你知道为什么吗？

谢谢你， Alexandru S.

Answer 1

您的<nav>代码未正确嵌套在HTML <head>代码中。将nav移至<body>内。 <head>应仅包含<title>，<style>，<meta>，<link>，<script>和<base>。

Answer 2

你有错误打开关闭头部的身体标签。您应该始终将您的内容放在body标签内而不是head标签中！

＆＃13;

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

＆＃13;

Bootstrap Custom CSS不会覆盖Bootstrap

2 个答案: