在引导组件上无法覆盖样式答案

【问题标题】：Having trouble over-riding style on bootstrap components在引导组件上无法覆盖样式
【发布时间】：2019-11-30 19:44:46
【问题描述】：

我无法让我的自定义 css 覆盖 Django 项目中 Bootstrap4 的任何组件。

我对前端开发很陌生，希望能把这个问题问清楚。注意：这是 Django 项目中的 html 表单。我的自定义 CSS 表已正确链接，因为我可以在页面的其他组件（非引导程序）上成功使用它。

我能够覆盖任何引导程序组件的唯一方法是将样式包含为 html 属性，如下例所示，我将第一行的背景设为蓝色。几天来，我一直在努力解决这个问题，我似乎发现的唯一事情是确保在 Bootstrap 样式表之后加载您的自定义样式表。我在引导 css 之后加载了 home.css 工作表，但我不确定 Django 加载这些工作表的方式是否会干扰订单。

任何有关解决此问题的帮助或建议将不胜感激。谢谢你。

    {% load staticfiles %}
    <head>
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  </head>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap" >
      <link rel="stylesheet" href="{% static 'css/home.css' %}" >
    </head>

    <body>
    <!--#################  START OF CARD  #################-->
            {% for product in products.all %}
            <div class="card-group">
            <div class="card mb-3">
    <!-- start second row -->
              <div id = "top" style = "background: blue;" class="row no-gutters">
                <div class="col-md-6 d-flex">
                  <div class="card-img-body">
                  <img src="{{ product.img_url }}" class="card-img img-fluid">
                </div>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                  <div class="card-body">
                    <h4 class="card-title text-center">{{product.title}}</h4>
                    <p class="card-text">{{product.body}}</p>
                    <p class="card-text text-right"><small class="text-muted">{{product.date_posted_pretty}}</small></p>
                  </div>
                </div>
              </div>
    <!-- start second row -->
              <div class="secondary row no-gutters d-none">
                <div class="col-md-6 d-flex align-items-center">
                  <div class="card-body">
                  <h6 class="card-subtitle text-center">{{product.product_name}}</h6>
                  <p class="card-text "><small class="text-muted">{{product.product_description}}</small></p>
                  </div>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                  <div class="card-body text-center">
                  <a class="btn btn-light" href="#" role="button">Product</a>
                  <a class="btn btn-light" href="#" role="button">Homepage</a>
                  <a class="btn btn-light" href="#" role="button">Mission</a>
                  </div>
                </div>
              </div>
            </div>
            </div>
            {% endfor %}

    <!--#################  END OF CARD  #################-->
    </body>

这是我尝试过的css，选择类和id。

    .row .no-gutters{
      background: blue;
    }

    #top {
      background: blue;
    }

删除样式作为属性后，我希望这个 css 覆盖引导组件，但事实并非如此。

【问题讨论】：

更新：所以只是为了尝试另一件事，我通过在标题中添加样式来尝试这个，它工作正常。所以我假设这意味着我的自定义 CSS 文件在引导后被读取。我可以通过将我的所有 css 保存在我的 html 中的样式标记中来解决这个问题，但是我真的很想将它分开。这也让我觉得这可能是 Django 特有的问题？

标签： css django bootstrap-4 frontend

【解决方案1】：

首先，检查你的选择器。

.row .no-gutters 不同于.row.no-gutters（没有空格）

首先是选择具有.no-gutters 类的元素，它们是具有.row 类的元素的后代。第二个选择具有.row 和.no-gutters 类的元素。

【讨论】：

谢谢，这确实有帮助，我能够让它工作，同时将 css 保留在我的 html 页面标题中的样式标签中。不幸的是，这仍然不适用于我的外部 CSS 页面。感谢您的帮助
您确定您的 CSS 文件 (home.css) 正在加载吗？
我是，因为我能够影响非引导组件的其他方面。谢谢。

【解决方案2】：

可以通过 3 种方式将 CSS 添加到 HTML 元素中：

内联 - 通过在 HTML 元素中使用 style 属性内部 - 通过使用部分中的元素外部 - 使用外部 CSS 文件

内联css获得最高优先级，因此你的问题。要解决您需要通过编辑或删除引导样式来解决冲突

看这里Customizing Bootstrap CSS template

【讨论】：

感谢您的评论。我真的希望根本不必编辑实际的引导文件。根据我的阅读，我应该能够应用我的自定义 css 文件来覆盖引导文件。这就是我遇到困难的地方。因此，添加 css 的内联和内部方式在这里都可以正常工作，而外部方式则不行。再次感谢。

【解决方案3】：

你试过去吗：

background: blue !important;

虽然不是最佳做法，但这应该可行。相反，请尝试更具体：

.card #top { background: blue ;}

或

div #top { background: blue;}

【讨论】：

我已经尝试过这些，不幸的是它们对我不起作用。