Django模板继承会破坏站点布局 [英] Django template inheritance breaks site layout
问题描述
我目前正在使用django 1.3.1，试图实现模板继承，以减少重复的代码量。
我也使用twitter-bootstrap v2.0。
I'm currently using django 1.3.1, trying to implement template inheritance, to minimize the amount of duplicated code. I'm also using twitter-bootstrap v2.0.
我有一个基本的html文件，包含导航栏。
它包含一个单一的{％block％}，它位于navbar下方的div标签中，如下所示：
I have a base html-file, containing the navbar. It contains a single {% block %} which is below the navbar, inside a div-tag, like this:
<div class="container">
{% block content %} {% endblock %}
<footer>
<p>Designad och skapad av Johan Rende, jrende@kth.se, 2012</p>
</footer>
</div>
这是网站看起来没有继承，只有一个html文件：
This is what the site looks like without inheritance, with only a single html-file:
这里是继承的外观。注意导航栏上方的空格以及压缩的搜索字段：
And here's how it looks with inheritance. Notice the space above the navbar, and the squashed search field:
当我只使用基本的css，它看起来很好，但即使我使用一个空模板来继承： / p>
When i used only the base css, it looked fine, but even when i used an empty template to inherit:
{% extends "base.html" %}
{% block content %}
{% endblock %}
空白仍然存在。
HTML有什么问题，还是Django中的错误？如何修复/规避？
Is there something wrong with the HTML, or is it a bug in Django? How can i fix/circumvent it?
编辑：这是整个基本的html文件：
edit: Here is the entire base html-file:
<!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编码的，所以我使用utep-8编码使用记事本保存文件。这显然添加了标题。我通过下载notepad ++和将编码更改为UTF-8而不使用BOM来修复它。
The problem was a utf-8 header, the "byte-order mark". Django complained when the file was encoded with ANSI, so i saved the file with utf-8 encoding using notepad. That apparently added the header. I fixed it by downloading notepad++ and changing the encode to UTF-8 without BOM.
http://www.w3.org/International/questions/qa-utf8-bom
这篇关于Django模板继承会破坏站点布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![布局良好](\"http://i.stack.imgur.com/yent4.jpg\"){kind=link}
