Div row-fluid 在 Django 和 Twitter-Bootstrap 中不起作用

Posted 2023-02-24

【中文标题】Div row-fluid 在 Django 和 Twitter-Bootstrap 中不起作用

【英文标题】：Div row-fluid does not work in Django and Twitter-Bootstrap

【发布时间】：2012-07-18 21:30:50

【问题描述】：

我正在使用 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 中，但无法将布局调整为浏览器的分辨率。谢谢！

编辑（解决方案）：

需要文件响应完美。

<link href=" STATIC_URL css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />

【参考方案1】：

看起来你已经知道了，但是what you were missing were the responsive media queries：

Bootstrap 不会自动包含这些媒体查询，但理解和添加它们非常容易，并且需要最少的设置。您有几个选项可以包含 Bootstrap 的响应式功能：

使用编译好的响应式版本，bootstrap-responsive.css 添加@import "responsive.less" 并重新编译Bootstrap 将 responsive.less 修改并重新编译为单独的文件