Bootstrap响应式CSS导航栏不起作用答案

【问题标题】：Bootstrap responsive CSS navbar not workingBootstrap响应式CSS导航栏不起作用
【发布时间】：2016-08-21 01:21:09
【问题描述】：

这是导航栏的 HTML：

<nav class="navbar navbar-light" style="background-color: #967BB6;">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'home' %}">Site</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a class="navigate" href="{% url 'profile' request.user.username %}">My Profile</a></li> 
                    <li><a class="navigate" href="{% url 'settings' %}">Settings</a></li>
                    <li><a class="navigate" href="{% url 'logout' %}">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

在大屏幕上看起来不错。当我在手机上最小化或访问它时，导航栏折叠项目会从它们的常规位置消失（正如他们应该的那样），我可以将鼠标悬停在按钮应该在的导航栏右侧和我的鼠标上指针相应地改变，但是当我点击时，什么也没有发生。他们也没有按钮图标。鼠标指针只是像悬停在按钮上一样发生变化。

这是标题 HTML：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
    <title>Title</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>

有人有什么建议吗？我应该包含一些涉及 JavaScript 的内容吗？谢谢。

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

您只包含 CSS - 您还需要包含 jQuery 库 -（Bootstrap 使用 jquery 来操作 dom）和实际的 Bootstrap.js 文件

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

【讨论】：