Question

我想使用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>

Answer 1

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

Answer 2

我知道这个话题已经有2年了，但是如果每个人在未来都遇到同样的问题，这里的解决方案是：在你的模板中，替换：

{% bootstrap_javascript %}

人：

{% bootstrap_javascript jquery=1 %}

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

2 个答案: