无法在引导程序中覆盖CSS
[英]Can't override CSS in bootstrap
问题描述
Like the title says, my custom CSS isn't overriding the core CSS in bootstrap. 
就像标题所说的那样，我的自定义CSS不会覆盖bootstrap中的核心CSS。 I'm following this tutorial and trying to add a larger margin beneath the navbar with no luck. 我正在按照本教程进行操作，并尝试在导航栏下方添加较大的空白，但是没有运气。 I'm also using Django, here's my html file: 我也在使用Django，这是我的html文件：
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Client Sign-In</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<h1>Enter ID</h1>
<form method="POST" class= "post-form"> {% csrf_token %}
{{ form.as_p }}
<button type='submit' class="save btn-default">Save</button>
</form>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
<h3>Personal Training</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
<h3>Physiotherapy</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<h3>Boxing</h3>
<p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
</script>
</body>
</html>
My custom CSS file is bootstrap-override.css and it's contents are: 我的自定义CSS文件是bootstrap-override.css ，其内容为：
.navbar {
margin-bottom: 30;
}
I've tried switching around <link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}"> and <link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}"> when I have the former on top and try inspecting the element in Chrome it's showing me that .navbar {margin-bottom: 30px;} is crossed out, meaning that it's being overriden right? 我尝试切换<link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">和<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">当我将前一个放在顶部并尝试检查Chrome中的元素时，这表明.navbar {margin-bottom: 30px;}被划掉了，这意味着它被覆盖了吗？ (There's also a little icon next to it that says invalid property value ) Which is the opposite of what I want. （旁边还有一个小图标，表示invalid property value ），这与我想要的相反。 When I switch them around so that my custom file is on bottom .navbar {margin-bottom: 30px;} is still crossed out. 当我切换它们以使我的自定义文件位于底部时.navbar {margin-bottom: 30px;}仍然划掉。 I have my STATIC-URL variable set to /static/ in settings.py. 我在settings.py中将我的STATIC-URL变量设置为/static/ 。 It doesn't seem like this is a project structure issue because the Chrome console is recognizing my custom code. 看来这不是项目结构问题，因为Chrome控制台可以识别我的自定义代码。
2 个解决方案
解决方案1
2 已采纳 2016-12-18 05:02:36
It might say "invalid property value" because 30 is not a unit - it should be 30px . 可能会说“无效的属性值”，因为30不是单位-应该是30px 。
If that's still not overwriting, you have a few options. 如果仍然没有覆盖，则有几种选择。
First, the CSS rule in Bootstrap may have a higher level of specificity - you should check in the browser Dev Tools to see what the original selector is that's applying the margin you're trying to overwrite. 首先，Bootstrap中的CSS规则可能具有更高的特异性-您应该在浏览器中检查“开发工具”，以了解原始选择器正在应用您要覆盖的边距。 For example, nav.navbar is more specific than .navbar and will match with higher priority even if it comes earlier in the CSS. 例如， nav.navbar比.navbar更具体，即使CSS中出现的优先级更高，也可以匹配更高的优先级。
If all else fails, make the rule important (though this is usually to be avoided and is strictly for tricky overrides): 如果所有其他方法均失败，则使该规则变得重要（尽管通常应避免使用此规则，并且严格地用于棘手的覆盖）：
.navbar {
margin-bottom: 30px !important;
}
解决方案2
1 2016-12-18 05:06:26
did you forget writing px after 30? 你忘了30岁以后写px吗？
.navbar {
margin-bottom: 30px;
}
or you could also try 或者你也可以尝试
.navbar {
margin-bottom: 30px !important;
}
If it still doesn't work, it means your css file is linked incorrectly. 如果仍然无法使用，则表示您的css文件链接错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.