0
タイトルと同様に、私のカスタムCSSはブートストラップのコアCSSをオーバーライドしていません。私はthisのチュートリアルに従っており、運行のないnavbarの下に大きなマージンを追加しようとしています。私が持っているとき、私は<link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">と<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">の周りに切り替えてみたブートストラップのCSSをオーバーライドできません。
.navbar {
margin-bottom: 30;
}
：
{% 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であり、それは内容があります：私もここに私のhtmlファイルだと、Djangoを使用しています前に上の元とクロムの要素を調べてみてくださいそれは.navbar {margin-bottom: 30px;}は、それは右オーバーライドされていることを意味する私に示している？ （それの隣に小さなアイコンがあり、それはinvalid property valueと言われています）私が望むものとは逆です。私の周りに私のカスタムファイルは、.navbar {margin-bottom: 30px;}の下にあるので、それらを切り替えると、まだ横断されます。私のSTATIC-URL変数は、settings.pyの/static/に設定されています。 Chromeコンソールが自分のカスタムコードを認識しているため、プロジェクト構造上の問題ではないようです。
あなたは '！important'を使用しました –