将烧瓶与引导程序一起使用时，自定义css无法正常工作 [英] custom css not working when using bootstrap with flask
问题描述
我试图使用引导程序和后端作为烧瓶来开发我的网站.但是似乎当我将CSS应用于我的元素时，它不起作用.我已经向我的问题发布了一个可重现的最小问题.
I was trying to develop my website using bootstrap and backend as flask. But it seems when I am applying css to my element its not working. I have posted a minimal reproducible problem to my question.
这是我的目录结构
我的 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 ，尽管其中包含许多元素，但我正在发布其最小版本.
This is my css file custom.css though it contained many elements I am posting a minimal version of it.
/* to avoid overlapping of navbar*/
body {
color: #ffff00;
padding-top: 70px;
}
如果在重现此问题时遇到任何麻烦，我还将上传整个文件结构这里
If you find any trouble reproducing this issue I am also uploading the entire file structure here
预期结果:
dashboard.html的背景颜色为黄色，顶部带有填充.
The background color of dashboard.html to be of yellow color and with some padding at the top.
注意:请注意，我已经尝试过所有可能的答案，作为对这个问题的建议，但没有一个对我有用.
Note : Please note that I have tried all possible answers that I was getting as suggestion to this question and none of them worked for me.
推荐答案
您设置正文的color，即文本颜色，而您想要设置背景颜色，即background-color.如果仍然不起作用，请禁用其他样式表，它们执行的优先级可能高于body(这是最低的)
You set the color of you body, which is the text color, you wanted to set the background color which is background-color. if that still doesn't work, disable the other style sheets, they may be doing something with higher precedence than body (which is the lowest one)
这篇关于将烧瓶与引导程序一起使用时，自定义css无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
