Bootstrap自定义CSS不会覆盖引导

我想实现的是我有一个自定义文件应该覆盖默认引导CSS。（它应该改变导航栏的菜单颜色，导航栏背景等）。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="https://stackoverflow.com/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="https://stackoverflow.com/a/layout/style.css"

link标签并没有结束......但是......它的工作原理。

如果我做关闭链接标签如下：

<link rel="stylesheet" href="https://stackoverflow.com/a/layout/style.css">

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

你知道为什么吗？

谢谢亚历S.

来源

2016-03-09 Okei

你<nav>标签不正确嵌套在你的HTML标记<head>。将nav移至<body>之内。 <head>应只包含<title>,<style>,<meta>,<link>,<script>和<base>。

来源

2016-03-09 16:38:35 SacWebDeveloper

谢谢你，它的工作。 – Okei

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

<!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="https://stackoverflow.com/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>

来源

2016-03-09 16:51:34

是的，这是由我的ejs被错误配置造成的，谢谢你的回应，安德烈。 – Okei

Bootstrap自定义CSS不会覆盖引导

回答

相关问题