个人中心
gpt4 book ai didi

python - 将 bootstrap 与 Flask 一起使用时，自定义 css 不起作用

转载 作者：行者123 更新时间：2023-12-01 00:58:42 24 4
gpt4 key购买 nike

我试图使用 Bootstrap 和后端作为 flask 来开发我的网站。但当我将 css 应用到我的元素时，它似乎不起作用。我已经针对我的问题发布了一个最小的可重现问题。

这是我的目录结构

enter image description here

我的ma​​in.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 的背景颜色为黄色，顶部有一些填充。

注意:请注意，我已经尝试了针对此问题得到的所有可能的建议答案，但没有一个对我有用。

最佳答案

我遇到了类似的问题，通过此处给出的响应以及其他程序员提出的其他类似问题的帮助，我发现 css 文件被保存在 chrome 的缓存内存中(或任何基于 chromium 的浏览器)。所以我假设您使用的是基于 chromium 的浏览器。

为了使 css 文件中的更改反射(reflect)在浏览器上，缓存也必须被清除。您可以在每次更改 css 文件时手动清除缓存，此选项可以在 chrome 设置或您正在使用的 chromium 浏览器中找到。或者，您可以通过开发人员工具阻止缓存文件。我找到了website这可以帮助解决这个问题。

Mozilla firefox 以不同的方式工作，我在使用它时没有遇到任何缓存问题。您还可以使用它来解决这个特定问题。我没有尝试过 safari，所以你可以检查一下，看看它是否适合你。

关于python - 将 bootstrap 与 Flask 一起使用时，自定义 css 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56005424/

24 4 0
文章推荐： jquery - 如何在 ajax 操作期间显示 throbber 或其他指示器？
文章推荐： javascript - 如何为谷歌地图标记设置新坐标？
文章推荐： jQuery UI 选项卡动态添加选项卡和内容不起作用
文章推荐： jquery - 将 onclick 事件添加到 td，但不应在其中的链接上触发
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com