Django模板继承破坏了站点布局

我目前正在使用django 1.3.1，试图实现模板继承，以最大限度地减少重复代码的数量。我也在使用twitter bootstrap v2.0。

我有一个基本的html文件，包含导航栏。它包含一个｛%block%｝，它位于导航栏下方的div标记内，如下所示：

<div class="container">
    {% block content %} {% endblock %}
<footer>
    <p>Designad och skapad av Johan Rende, jrende@kth.se, 2012</p>
</footer>
</div>

这就是没有继承的网站，只有一个html文件的样子：

布局良好的

以下是继承的情况。注意导航栏上方的空格，以及被压缩的搜索字段：

布局错误的

当我只使用基本css时，它看起来很好，但即使我使用空模板来继承：

{% extends "base.html" %}
{% block content %}
{% endblock %}

空白处还在。

HTML有什么问题吗，或者是Django中的一个bug？如何修复/规避它？

编辑：这是整个基本html文件：

<!DOCTYPE html>    
<html lang="en">    
  <head>    
    <meta charset="utf-8">    
    <title>Biblio</title>    
    <meta name="description" content="">    
    <meta name="author" content="">    
    <!--[if lt IE 9]>    
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    
    <![endif]-->    
    <link href="/static/css/bootstrap.css" rel="stylesheet">    
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">    
  </head>    
  <body>    
    <div class="navbar">    
        <div class="navbar-inner">    
            <div class="container">    
                <ul class="nav pull-left">    
                    <a class="brand" href="#">Test-test</a>    
                </ul>    
                <ul class="nav">    
                    <li class="active"><a href="#">Home</a></li>    
                    <li><a href="/about/">Din profil</a></li>    
                    <li><a href="/contact/">Dina böcker</a></li>    
                    <li><a href="/contact/">Lägg till bok</a></li>    
                    <li class="divider-vertical align-left"></li>    
                    <li>    
                        <form class="navbar-search" name="input" action="." method="get">    
                            <input type="text" class="search-query" name="search" placeholder="Sök böcker/användare" >    
                        </form>    
                    </li>    
                </ul>    
                <ul class="nav pull-right">    
                    <li class="divider-vertical align-left"></li>    
                    <li class="dropdown">    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">    
                            Logga in    
                            <b class="caret"></b>    
                        </a>    
                        <ul class="dropdown-menu">    
                            <form name="input" action="/login/" method="post">    
                                <p><label for="id_username">Username:</label> <input id="id_username" class="input" type="text" name="username" maxlength="30" /></p>    
                                <p><label for="id_password">Password:</label> <input type="password" name="password" id="id_password" /></p>    
                                <input type="submit" value="Logga in" />    
                            </form>    
                        </ul>    
                    </li>    
                </ul>    
            </div>    
        </div>    
    </div>    
        <div class="span5">    
            {% if uname %}    
                Välkommen, {{ uname }}    
            {% else %}    
                Logga in!    
            {% endif %}    
        </div>    
    <div class="container">    
    {% block content %} {% endblock %}    
    <footer>    
        <p>Designad och skapad av Johan Rende, jrende@kth.se, 2012</p>    
    </footer>    
    </div> <!-- /container -->    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script src="../static/js/bootstrap-dropdown.js"></script>    
  </body>    
</html>

我解决了它。

问题出在utf-8标头上，即"字节顺序标记"。Django抱怨这个文件是用ANSI编码的，所以我用记事本用utf-8编码保存了这个文件。这显然增加了标题。我通过下载notepad++并将编码更改为没有BOM的UTF-8来修复它。

http://www.w3.org/International/questions/qa-utf8-bom

Django将识别｛%block-contence%｝和｛%endblock%｝之间的空间，并将其写入html。我必须看看你的css才能确定，但这些标签之间的空间很可能显示在顶部。

相关内容

最新更新

热门标签：