【发布时间】：2016-12-18 04:53:18
【问题描述】：
正如标题所说，我的自定义 CSS 不会覆盖引导程序中的核心 CSS。我正在关注this 教程并尝试在导航栏下方添加更大的边距，但没有运气。我也在使用 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>
我的自定义 CSS 文件是 bootstrap-override.css，它的内容是：
.navbar {
margin-bottom: 30;
}
我尝试切换<link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">和<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">，当我将前者放在顶部并尝试检查Chrome中的元素时，它显示.navbar {margin-bottom: 30px;}被划掉了，这意味着它被覆盖了对吧？ （旁边还有一个小图标，上面写着invalid property value）这与我想要的相反。当我切换它们以使我的自定义文件位于底部时，.navbar {margin-bottom: 30px;} 仍然被划掉。我在 settings.py 中将我的STATIC-URL 变量设置为/static/。这似乎不是项目结构问题，因为 Chrome 控制台正在识别我的自定义代码。
【问题讨论】：
-
你用过
!important
标签： python html django twitter-bootstrap