与 Django 一起使用时，Bootstrap Navbar 不会着色答案

【问题标题】：Bootstrap Navbar won't get colored when using with Django与 Django 一起使用时，Bootstrap Navbar 不会着色
【发布时间】：2019-10-13 23:56:20
【问题描述】：

我正在使用 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 %}

【问题讨论】：

标签： html css django bootstrap-4

【解决方案1】：

我认为将 css 作为块加载到 .html 文件中不是一个好习惯，相反，您应该做的是：

在静态文件夹中创建一个“css”文件夹。
将你的styles.css（当前在你的模板文件夹中）移动到创建的文件夹'css'。
把这个：<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 块。希望对您有所帮助！

【讨论】：

这行得通，但现在我的卡片布局变得一团糟。乱七八糟的。在我的项目中自己尝试（我在问题中提供了我的 github 链接），如果有解决方法，请发布！无论如何，谢谢你！
@AtharvaPatwardhan 您是否提交了最后的更改？你没有做任何我写的事情。