django bootstrap工具包没有响应。如何强迫它?

时间:2014-05-05 08:57:35

标签: django twitter-bootstrap

你知道如何强制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/

1 个答案:

答案 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>

错过了几件事:

  • 导航的流体容器
  • 您需要指定导航栏的可折叠部分
  • 导航栏切换按钮

请参阅http://getbootstrap.com/2.3.2/components.html#navbar