Bootstrap自定义CSS不会覆盖Bootstrap
[英]Bootstrap Custom CSS won't override Bootstrap
问题描述
我想要实现的是，我有一个自定义文件，该文件应该覆盖默认的引导CSS。 （应该更改导航栏菜单颜色，导航栏背景等）。
PS我将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 rel="stylesheet" href="/a/layout/style.css">
自定义文件不会覆盖默认的引导程序。 它会加载它，但不会覆盖。
你知道为什么吗？
谢谢Alexandru S.
2 个解决方案
解决方案1
0 已采纳 2016-03-09 16:38:35
您的<nav>标记不正确地嵌套在HTML <head>标记中。 将nav移到<body>内部。 <head>应该只包含<title> ， <style> ， <meta> ， <link> ， <script>和<base> 。
解决方案2
0 2016-03-09 16:51:34
您在打开头部标签时出错。 您应该始终将内容放在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>
自定义CSS不会覆盖引导程序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.