2016-06-26 3 views
0

ウェブサイトを作成していて、直接HTMLを使用するとうまく動作します。今私はテンプレートをレンダリングするためにJinja2を使いたいと思っています。何か間違っています。私のページの上に空白があることがわかりますhttp://kgroupman.azurewebsites.net/しかし、それはFirefoxでうまくいきます。 Inspect要素はその空白部分を指摘せず、余白や余白がなく、ソースに何も問題がないことを示します。助けてください!ここで Jinja2/Flaskを使用すると空白の部分が表示される

はコードです:

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 %} 

答えて

0

それはあなたの体の上部にある文字です

enter image description here

+0

しかし、それはFirefoxでうまく動作し、ソースに奇妙な文字はありません:( – tuankhoa1996

+0

Firefoxは文字を削除するように見えますが、Chromeはそれを空白としてレンダリングします。そのページのソースを保存すると、 ''あなたのエディタは文字を表示するかもしれないし、あなたの ''タグの後ろの空白を削除し、それが役立つかどうかを確認することをお勧めします –

+0

前後に空白がありません。 ( – tuankhoa1996

0

解決策が見つかりました。 login.htmlを削除して再作成してください。私は何とか見ることができない目に見えない文字がなければなりません!

関連する問題