我正在使用Django创建一个电子商务网站。在其中使用了Bootstrap导航栏，但是当我在{％block css％}标签中使用它时，从here复制的css无法正常工作。
我在这里上传html。任何帮助在很大程度上表示赞赏。
此外，如果有人需要整个项目来了解可能导致问题的原因，here's the project.
basic.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>{% block title %} {% endblock %}</title>
<style>
{% block css %}
.navbar {
background-color: #e74c3c;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ffbbbc;
}
.navbar .navbar-text {
color: #ecf0f1;
}
.navbar .navbar-text a {
color: #ffbbbc;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ffbbbc;
}
.navbar .navbar-nav .nav-link {
color: #ecf0f1;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ffbbbc;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar .navbar-toggle {
border-color: #c0392b;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ecf0f1;
}
.navbar .navbar-link {
color: #ecf0f1;
}
.navbar .navbar-link:hover {
color: #ffbbbc;
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffbbbc;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffbbbc;
background-color: #c0392b;
}
{% endblock %}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/shop">Veronicart</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Veronicart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/tracker">Product Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/contact">Help and Support</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button type="button" class="btn btn-secondary mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Cart(<span id="cart">0</span>)
</button>
</div>
</nav>
{% block body %} {% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
{% block js %} {% endblock %}
</body>
</html>
index.html
{% extends 'mainShop/basic.html' %}
{% block css %}
.col-md-3 {
display: inline-block;
margin-left: -4px;
}
.carousel-indicators .active {
background-color: blue;
}
.col-md-3 img {
width: 170px;
height: 200px;
}
body .carousel-indicator li {
background-color: blue;
}
body .carousel-indicators {
bottom: 0;
}
body .carousel-control-prev-icon,
body .carousel-control-next-icon {
background-color: blue;
}
.carousel-control-prev,
.carousel-control-next {
top: auto;
bottom: auto;
padding-top: 222px;
}
body .no-padding {
padding-left: 0, padding-right: 0;
}
{% endblock %}
{% block body %}
{% load static %}
<div class="container">
<!--Slideshow starts here -->
{% for product, range, nSlides in allProds %}
<h5 class="my-4">Flash Sale On {{product.0.category}} - Recommended Items</h5>
<div class="row">
<div id="demo{{forloop.counter}}" class="col carousel slide my-3" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo{{forloop.counter}}" data-slide-to="0" class="active"></li>
{% for i in range %}
<li data-target="#demo{{forloop.parentloop.counter}}" data-slide-to="{{i}}"></li>
{% endfor %}
</ul>
<div class="container carousel-inner no-padding">
<div class="carousel-item active">
{% for i in product %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card-deck">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{i.product_name}}</h5>
<p class="card-text">{{i.desc}}</p>
<button id="pr{{i.id}}" class="btn btn-primary cart">Add To Cart</button>
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %} {% endfor %}
</div>
</div>
</div>
<!-- left and right controls for the slide -->
<a class="carousel-control-prev" href="#demo{{forloop.counter}}" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo{{forloop.counter}}" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
{% endfor %}
</div>
{% endblock %} {% block js %}
<script>
console.log('working');
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
document.getElementById('cart').innerHTML = Object.keys(cart).length;
}
$('.cart').click(function() {
console.log('clicked');
var idstr = this.id.toString();
console.log(idstr);
if (cart[idstr] != undefined) {
cart[idstr] = cart[idstr] + 1;
} else {
cart[idstr] = 1;
}
console.log(cart);
localStorage.setItem('cart', JSON.stringify(cart));
document.getElementById('cart').innerHTML = Object.keys(cart).length;
});
$('#popcart').popover();
document.getElementById("popcart").setAttribute('data-content', '<h5>See what you wanna order!</h5>');
</script>
{% endblock %}
答案 0 :(得分：0)
我认为将css作为块加载到.html文件中不是一个好习惯，相反，您应该做的是：
将此：<link rel="stylesheet" href="styles.css">更改为：
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
在此之后将其添加到basic.html文件{% load staticfiles %}的顶部：<!doctype html> \
现在，您可以从 basic.html 中删除该CSS块。希望有帮助！