Question

我试图使用引导程序和后端作为烧瓶来开发我的网站。但是似乎当我将CSS应用于我的元素时它不起作用。我已经向我的问题发布了一个可重现的最小问题。

这是我的目录结构

我的 main.py 文件

from flask import Flask, render_template
app = Flask(__name__)

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

我的 layout.html 文件

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Python For Everybody</title>

<!-- Custom styles for this template -->
  <!-- bootstrap css-->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css') }}"/>
  <!-- Custom fonts for this template -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />


  <!-- add custom css file here-->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
</head>

<body>


    <!-- Navigation -->
    <header>
      <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ml-5" href="#">Python For Everything</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 justify-content-end mr-5" id="navbarSupportedContent">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Login/Register</a>
    </li>
  </ul>

</div>
</nav>
</header>


    {% block body %}

    {% endblock %}

  <!-- Bootstrap core JavaScript -->
  <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap/bootstrap.min.js') }}"></script>

  <!--add custom js file here-->
</body>

</html>

我应要求呈现的 dashboard.html 文件

{% extends "layout.html" %}
{% block body %}
<br>
<h1>Hello World</h1>
<br>
{% endblock %}

这是我的css文件 custom.css ，尽管它包含许多元素，但我正在发布其最小版本。

/* to avoid overlapping of navbar*/
body {
  color: #ffff00;
  padding-top: 70px;
}

如果在重现此问题时遇到任何麻烦，我还将上传整个文件结构here

预期结果：

dashboard.html的背景颜色为黄色，顶部带有填充。

注意：请注意，我已经尝试过所有可能的答案，以作为对该问题的建议。

Answer 1

您设置正文的color，即文本颜色，而您想要设置背景颜色，即background-color。如果仍然不起作用，请禁用其他样式表，它们可能正在执行比body（最低的样式）优先级更高的操作

Answer 2

我遇到了一个类似的问题，并且通过此处给出的回答以及其他程序员提出的其他类似问题，我发现css文件被保存在chrome的缓存（或任何基于chrome的浏览器）中。因此，我假设您使用的是基于Chrome的浏览器。

要使css文件中的更改反映在浏览器上，还必须清除缓存。您可以在每次对css文件进行更改时手动清除缓存，以在chrome设置或您使用的chrome浏览器中找到此选项。另外，您可以防止文件通过开发人员工具缓存。我发现有一个website可以帮上忙。

Mozilla firefox以不同的方式工作，使用它时我没有遇到任何缓存问题。您也可以使用它来解决此特定问题。我还没有尝试过野生动物园，所以您可以查看一下，看看它是否适合您。

Answer 3

正如本answer中所指出的：

<块引用>

Flask 的 max-age 值为 12 小时。您可以使用此将其设置为 0 代码：

app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0

参考its documentation 详情。

使用烧瓶引导程序时自定义css无法正常工作

3 个答案: