Question

我正在创建一个网站，当我使用直接html时，它工作正常。现在我想使用Jinja2来渲染我的模板，但是有些不对劲。你可以看到我的页面顶部有一个空白http://kgroupman.azurewebsites.net/，但它适用于firefox。 Inspect元素不指出空白部分并且没有填充或边距，并且源没有任何问题。请帮忙！

以下是代码：

base.html文件

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>
        {% block page_title %}{% endblock %}
    </title>
    <!--BASE CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename='css/base.css')}}" />
    <!--ADDITIONAL CSS-->
    {% block additional_css %}

    {% endblock %}
    <!--BASE SCRIPT-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!--ADDITIONAL SCRIPT-->
    {% block additional_script %}

    {% endblock %}
</head>
<body>
    <section class="header">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span><img src="{{url_for('static', filename='imgs/4logo.png')}}" id="logo"></span></a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right"></ul>
                </div>
            </div>
        </nav>
    </section>
    <section class="body">
        <div class="left-panel">
            {% block body_left %}

            {% endblock %}
        </div>
        <div class="right-panel">
            {% block body_right %}

            {% endblock %}
        </div>
    </section>
    <section class="footer">
        <span>@Ngo Tuan Khoa - 2016</span>
    </section>
</body>
</html>

的login.html

{% extends "base.html" %}

{% block page_title %}Đăng nhập | Quản lý nhóm{% endblock %}

{% block additional_css %}
    <link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}" />
{% endblock %}

{% block additional_script %}
    <script src="../static/script/login.js"></script>
{% endblock %}

{% block body_left %}
<div class="login-form">
    <p><img id="login-icon" src="{{url_for('static', filename='imgs/user.jpg')}}"></p>
    <form action="" method="POST">
        <p>Tên đăng nhập</p>
        <p><input type="text" class="input-field" placeholder="Username"></p>
        <p>Mật khẩu</p>
        <p><input type="password" class="input-field" placeholder="Password"></p>
        <p><input type="button" class="btn-login" value="Đăng nhập"></p>
    </form>
</div>
{% endblock %}

{% block body_right %}
<img src="{{url_for('static', filename='imgs/wall.jpg')}}" height="100%" class="img-responsive">
{% endblock %}

Answer 1

它是你身体顶部的一个角色

Answer 2

找到解决方案。删除login.html并重新创建它。必须是一个看不见的角色，我无法以某种方式看到它！

使用Jinja2 / Flask时会出现空白部分

2 个答案: