你知道如何强制django bootstrap工具包响应吗?我的意思是例如当宽度很小时导航栏的改变。
我在base.html
:
{% bootstrap_stylesheet_tag %}
{% bootstrap_stylesheet_tag "responsive" %}
什么是"翻译"在查看页面来源时检查:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
完整的base.html
内容:https://gist.github.com/andilab/785133e800f023c89689
示例在这里呈现@ jsfiddle:http://jsfiddle.net/andilab/4Jqab/
答案 0 :(得分:1)
在这里找到更新的jsfiddle http://jsfiddle.net/4Jqab/1/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://dogspot.dyndns.org/static/lapa_icon.png">dogspot</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="/dogs" class="">Dogs</a></li>
<li><a href="">Form</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/dogs/create">create</a></li>
<li><a href="/contact">contact</a></li>
<li><a href="">Inline</a></li>
<li><a href="">Search</a></li>
<li><a href="">Using template</a></li>
</ul>
<li>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form></li>
<li><a href="/dogs/create">create</a></li>
<li><a href="/contact">contact</a></li>
<li><a href="">Pagination</a></li>
<li><a href="">Buttons</a></li>
</ul>
</div>
</div>
</div>
</div>
错过了几件事: