css - 从 django 中的 Bootstrap 更改超大屏幕的背景颜色

Question

我是网络开发和 Django 的新手。我正在关注一个名为“尝试 Django 1.8”的教程。

在这段代码中，我应该将超大屏幕的背景颜色更改为#155A1E。

如果我在 google chrome 中按 shift + refresh，颜色会显示出来，然后变回灰色。当我检查谷歌浏览器中的代码时，我可以在样式选项卡中看到 .jumbotron{} 中的背景颜色有删除线。样式选项卡中还有另一个版本的 .jumbotron{}，它具有背景颜色并带有检查。如果我取消选中该框，颜色就会固定。

我如何在 Django 中解决这个问题？

{% extends "base.html" %}
{% load crispy_forms_tags %}


{% block head_title %}Welcome | {{ block.super}}{% endblock %}

<style>
{% block style %}
    .jumbotron {
        background-color: #155A1E;
    }
{% endblock %}
</style>


{% block jumbotron %}

    <div class="jumbotron">
        <div class='container'>
            <div class="row">
                <div class='col-sm-6'>
                    <h1>Try Django 1.8</h1>
                    <p>Some text here!!! This text should be long so that we can test the columns in the webpage. So here we go. We are trying to make this line as long as possible.</p>
                    <p>
                      <a class="btn btn-lg btn-primary" href="" role="button">Join us &raquo;</a>
                    </p>

                </div>

                <div class='col-sm-6' style="background-color:black;height:300px">


                </div>
            </div>
        </div>
    </div>
{% endblock %}




{% block content %}
<div class="row">
    <div class="row">


    </div>


  <div class="col-xs-3 pull-right">
        <p class='lead text-align-center'>{{ title}}</p>

        <!--{{ user }}-->

        <!--&lt;!&ndash;{{ request.user }}&ndash;&gt;-->

        <!--abc is = {{ abc }}-->

        <form method='POST' action=''>{% csrf_token %}

            {{ form|crispy }}

            <input class='btn btn-primary' type="submit" value="Signup" />
        </form>
  </div>

    <div class='col-sm-3'>
        <p class='lead text-align-center'>Built with Django &amp; Bootstrap</p>
    </div>

    <div class='col-sm-3'>
        <p class='lead text-align-center'>created for starters of all kinds.</p>
    </div>

    <div class='col-sm-3'>
        <p class='lead text-align-center'>Always open source.</p>
    </div>

 </div>
    {% endblock %}

Answer 1

您可以将 do important 添加到您的 css 属性中。

就这样:

.jumbotron {
    background-color: #155A1E!important;
}

它将取代默认的