我正在使用Django和Twitter-Bootstrap来创建布局,但模板中的行div流体不起作用。 我正在使用继承模板并尝试将div放在子模板中但不起作用。 应该根据浏览器的分辨率调整页面大小。 这是一个例子: http://twitter.github.com/bootstrap/examples/fluid.html#
结构可能是:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9"></div>
</div>
</div>
base.html文件:
<div class="container-fluid">
<div class="row-fluid">
{% block sidebarnav %} {% endblock sidebarnav %}
{% block content %} {% endblock content %}
</div>
</div>
base_profile.html:
{% extends "base.html" %}
{% block sidebarnav %} {% endblock sidebarnav %}
{% block content %} {% endblock content %}
base_home.html
{% extends "base_profile.html" %}
{% block sidebarnav %}
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Home</li>
<li class="{% active request '/home/' %}"><a href="{% url 'home' %}"><i class="icon-home"></i>Home</a></li>
<li class="divider"></li>
</ul>
</div>
</div>
{% endblock sidebarnav %}
{% block content %} {% endblock content %}
index_home.html
{% extends "base_home.html" %}
{% block content %}
<div class="span9">
content
</div>
{% endblock content %}
使用此结构,流体div行显示在firebug中,但无法根据浏览器的分辨率调整布局大小。谢谢!
EDIT(溶液):
需要文件响应才能完美运行。
<link href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
答案 0 :(得分:0)
看起来你已经想到了这一点,但是what you were missing were the responsive media queries:
Bootstrap不会自动包含这些媒体查询,但理解和添加它们非常简单,只需要很少的设置。您可以选择包含Bootstrap的响应功能:
- 使用已编译的响应版本bootstrap-responsive.css
- 添加@import“responsive.less”并重新编译Bootstrap
- 修改并重新编译responsive.less作为单独的文件
醇>