Я пытался разработать свой сайт с использованием начальной загрузки и бэкэнда в качестве фляги. Но, кажется, когда я применяю css к своему элементу, он не работает. На мой вопрос я опубликовал минимальную воспроизводимую проблему.
Вот моя структура каталогов
My main.py file
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def dashboard():
return render_template('dashboard.html')
My layout.html file
<!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;
}
Если вы обнаружите какие-либо проблемы с воспроизведением этой проблемы, я также загружаю всю файловую структуру здесь
Что ожидалось:
Цвет фона dashboard.html должен быть желтого цвета с некоторыми отступами вверху.
Примечание: обратите внимание, что я попробовал все возможные ответы, которые я получил в качестве предложения на этот вопрос, и ни один из них не помог мне.