时间戳

首页 > 解决方案 > 无法结合 Bootstrap 和自定义 CSS

python - 无法结合 Bootstrap 和自定义 CSS

问题描述

我正在使用 Flask 和 Bootstrap。我正在尝试将我自己的自定义 CSS 与一些 Bootstrap 类结合起来，虽然我可以将 Bootstrap 类应用到元素上，但是当我尝试应用我自己的自定义 CSS 时，它并不总是有效。例如，我将 Bootstrap 应用text-center到一个 div，它就可以工作。然后我尝试应用一些自定义 CSS，但要么什么都没有发生，要么只应用了我的 CSS 的一部分。例如，color: red工作但font-size: 100px什么都不做。

这让我非常疯狂，我已经尝试了一切。我的 CSS 在 Bootstrap CDN 之后加载，我url_for在 Flask 中使用来访问 CSS 文件。我也尝试过使用!important，但这无济于事。我不知道还能尝试什么。

在我的基本模板中导入 CSS 内容：

<head>
    {% block head %}
    <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">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
{% endblock %}
</head>

在下一个片段中，Bootstrap 类都可以工作。但是，当我尝试使用red该类测试一些自定义 CSS 时，事情开始出错。我的自定义 CSS 中的color: red属性有效，但字体大小更改无效。我也无法对图像进行任何自定义。

{% extends "base.html" %}

{% block content %}
<div class="header">
    <header class="text-center">
        <div>
            <img src="{{ logo }}" class="img-fluid">
        </div>
        <div>
            <p class="red">Text here.</p>
            <p>More text.</p>
        </div>
        <div class="buttons">
            <a href="{{url_for('about')}}" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
        </div>


    </header>
</div>


{% endblock %}

一些自定义 CSS

.red {
    color: red;
    font-size: 100px;
}

标签： pythonhtmlcsstwitter-bootstrapflask

解决方案

我建议在浏览器中使用Inspector来确定将哪些样式应用于您的元素。

根据提供的代码，该font-size规则正在正确应用。

https://jsfiddle.net/withn/5h4aft9d/3/

<!DOCTYPE html>
<html lang="en">
  <head>
    <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">
    <style>
    .red {
      color: red;
      font-size: 100px;
    }
    </style>
  </head>
  <body>
    <div class="header">
      <header class="text-center">
        <div>
          <img src="#" class="img-fluid">
        </div>
        <div>
          <p class="red">Text here.</p>
          <p>More text.</p>
        </div>
        <div class="buttons">
          <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
        </div>
      </header>
    </div>
  </body>
</html>

这里有更多有用的信息：如何覆盖 Bootstrap CSS 样式？

推荐阅读