CSS 和 HTML 在 Flask Jinja2 模板中不起作用答案

【问题标题】：CSS and HTML Not Working In Flask Jinja2 TemplateCSS 和 HTML 在 Flask Jinja2 模板中不起作用
【发布时间】：2020-10-24 15:51:52
【问题描述】：

我有一个相当简单的 HTML 模板，我无法开始工作。这让我很困惑。

我在烧瓶应用程序中使用 Jinja2 模板来使用 Twitter Bootstrap 显示页面：

这是我的代码：

{% extends "layout.html" %}

{% block description %}{{ description }}{% endblock %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container">
  <h2 class="text-center" style="margin-top: 2rem;">Webinars on the Cutting Edge of Data Science</h2>
  <p class="text-center">Two hour webinars on the latest topics in data science.  We break down things like the newest in data science research, deep learning, and the newest techniques within the field.</p>
  <hr>

<div class="row">
  <div class="col-md-8">
    <h3>Next Episode: {{ current_webinar['title'] }}</h3>
    <hr>
    <p><strong>Date:</strong> {{ current_webinar['date'] }}<br>    <strong>Time: </strong> 6:30-8:30 EST</p>
    <p><strong>Description: </strong>{{ current_webinar['description'] }}</p>
    <a href="/webinars/{{ current_webinar['idx'] }}" class="btn btn-warning">Learn More</a>
  </div>
  <div class="col-md-4">
    {% set current_webinar_img = current_webinar['path'][7:] | replace('\\', '/') %}
    <img src="{{ url_for('static', filename=current_webinar_img) }}" height="350" width="100%">
  </div>
</div>
<div class="row">
  <h3 class="text-center">My Heading Make It Longer To See What Happens</h3>
  <p>This is my paragraph</p>
  <a href="#" class="btn btn-warning">Learn More</a>
</div>
</div>

{% endblock %}

我遇到的问题是第二个row 类中的所有材料都没有正确显示。

我希望该块的标题后跟一个段落，但所有内容都出现在一行上：

我觉得这很奇怪，无法检测出导致这些变化的原因。这是一个简单的模板，据我所知，我的 html/css 中没有错误，而且我不知道我的 jinja 模板中有任何问题会导致渲染不正确。

这里的 FWIW 是整个页面渲染后的 HTML：

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<meta name="description" content="Two hour webinars held every two weeks on data science">
<meta name="author" content="Jonathan Bechtel">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/styles.css">
<link rel="stylesheet" href="/static/css/jumbotron.css">
<title>Live data science webinars</title>

</head>
<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Teaching</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="/data-science-part-time-class">Part Time Class</a>
          <a class="dropdown-item" href="/webinars">Webinars</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
      </ul>
    </div>
  </nav>
  <main role="main">
  
<div class="container">
  <h2 class="text-center" style="margin-top: 2rem;">Webinars on the Cutting Edge of Data Science</h2>
  <p class="text-center">Two hour webinars on the latest topics in data science.  We break down things like the newest in data science research, deep learning, and the newest techniques within the field.</p>
  <hr>

<div class="row">
  <div class="col-md-8">
    <h3>Next Episode: Tensorflow Deep Dive, Vol. 2</h3>
    <hr>
    <p><strong>Date:</strong> 2020-07-08<br>    <strong>Time: </strong> 6:30-8:30 EST</p>
    <p><strong>Description: </strong>In this workshop, we&#39;ll learn the fundamentals and basics of Tensorflow.</p>
    <a href="/webinars/5" class="btn btn-warning">Learn More</a>
  </div>
  <div class="col-md-4">
    
    <img src="/static/img/life_sciences.png" height="350" width="100%">
  </div>
</div>
<div class="row">
  <h3 class="text-center">My Heading Make It Longer To See What Happens</h3>
  <p>This is my paragraph</p>
  </div>
</div>


</main>
<footer class="container">
  
  <p>&copy; Company 2017-2020</p>
  
</footer>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="/static/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap flask jinja2

【解决方案1】：

IMO 代码是正确的。确保 /static/css/styles.css 不包含任何错误的 CSS 定义，然后尝试清除浏览器缓存。

【讨论】：