使用 Bootstrap 无法在 Flask 中加载自定义 CSS答案

【问题标题】：Custom CSS not loading in Flask with Bootstrap使用 Bootstrap 无法在 Flask 中加载自定义 CSS
【发布时间】：2021-11-03 14:15:07
【问题描述】：

我正在学习 Flask，并且我有这个基本的 Web 应用程序。我正在使用 Bootstrap 5，我注意到如果我加载 Bootstrap 样式表，我的自定义 CSS 将不起作用（如果我删除 Bootstrap 样式表，它可以正常工作）。

我有这个文件夹结构：

flaskWebsite
         |
         |__pycache__
         |
         |templates
                 |index.html
                  ...
         |static
               |
               |main.css
               |main.js
         |venv 
         |
         |app.py

以下是一些相关代码：

app.py

@app.route("/")
def index():
    return render_template('index.html')

index.html

<head>
        <title>Home</title>
        <!--Custom CSS-->
        <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

我尝试将 bootstrap.min.css（从 Bootstrap 下载）放入 static 文件夹，但没有改变。

谁能解释一下为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： python html css flask bootstrap-5

【解决方案1】：

称为优先级，当你在同一个html文件中有多个样式表时，如果其中一些包含具有相同特性的元素，将应用最后一个。在您的情况下，Bootstrap css 可能会覆盖您的自定义 css。尝试在引导后放置自定义 css，如下所示：

<head>
        <title>Home</title>

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!--Custom CSS-->
        <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
</head>

【讨论】：