Question

我目前正在使用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文件：

good layout

以下是继承的看法。注意导航栏上方的空格和压扁的搜索字段：

bad layout

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

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

白色的空间还在那里。

HTML有什么问题，还是Django中的错误？我该如何解决/规避它？

编辑：这是整个基本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>

Answer 1

我解决了。

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

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

Answer 2

Django将识别{％block content％}和{％endblock％}之间的空格并将其写入html。我必须看到你的css以确保，但这些标签之间的空间可能会显示在顶部。

Django模板继承打破了网站布局

2 个答案: