使用 django-bootstrap3 难以创建导航栏切换答案

【问题标题】：Difficulty creating navbar toggle with django-bootstrap3使用 django-bootstrap3 难以创建导航栏切换
【发布时间】：2014-11-16 19:10:50
【问题描述】：

我想使用django-bootstrap3 向我的网站添加一个简单的导航栏。我正在编辑以创建导航栏的 base.html 文档适用于 Twitter Bootstrap，但不适用于 django-bootstrap3。我遇到的问题是应该切换下拉列表的按钮在单击时没有任何作用。有没有人遇到过这个问题？

这是我的 base.html：

<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock title %}</title>

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

<style>
    body {
        padding-top: 70px;
    }
</style>

    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

 <!------Navbar ---------->

<header class = "navbar navbar-inverse navbar-fixed-top" role = "banner">
<div class = "container">
    <div class ="navbar-header">
        <button type = "button" class= "navbar-toggle" data-toggle = "collapse" data-target = "#dropdown">
            <span class = "sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a href="#" class ="navbar-brand">Project Name</a>
    </div><!-- End Navbar Header-->

    <div class = "collapse navbar-collapse" id = "dropdown">

        <ul class = "nav navbar-nav navbar-right" role = "navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">New Page</a></li>
            <li><a href="#">New Page</a></li>
            <li><a href="#">New Page</a></li>
        </ul>      

    </div><!-- End Nav Contents -->
</div><!-- End Container -->
</header>

【问题讨论】：

您在查找静态文件的位置可能存在一些问题。查看您的 settings.py 以确保它有意义。另外，查看 html 的源代码，看看是否有某些内容未被访问。
访问 base.html 时查看终端日志.. 有任何干扰..？
没有干扰。我一直在阅读文档，不幸的是，它没有任何关于数据切换或数据目标的内容。我在我的 settings.py 文件中没有看到任何问题，并且其他所有内容都已渲染得很好。

标签： django twitter-bootstrap django-templates navbar

【解决方案1】：

问题是 django-bootstrap3 的 javascript 需要安装 jquery（我错误地认为 django-bootstrap3 会自动执行此操作）。我一引用 jquery，问题就立即得到解决。

【讨论】：

您能否详细说明您是如何正确引用 jquery 的？我有一个非常相似的问题。
django-bootstrap3 的默认设置是不包括 jquery 加载。因此，您可以添加链接以加载 jquery，或更改默认设置。看看@django-bootstrap3.readthedocs.io/en/latest/settings.html。具体来说，# Include jQuery with Bootstrap JavaScript (影响 django-bootstrap3 模板标签) 'include_jquery': True,

【解决方案2】：

我知道这个主题已有 2 年历史了，但如果将来每个人都有同样的问题，这里的解决方案是：在您的模板中，替换：

{% bootstrap_javascript %}

作者：

{% bootstrap_javascript jquery=1 %}

【讨论】：