这是导航栏 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>
在大屏幕上看起来不错。当我在我的手机上最小化或访问它时，导航栏折叠元素从它们的常规位置消失(正如它们应该的那样)，我可以将鼠标悬停在导航栏的右侧，该按钮应该是按钮和我的鼠标指针相应地改变，但是当我点击时，没有任何反应。他们也没有按钮图标。鼠标指针会发生变化，就好像它悬停在按钮上一样。
这是 header 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 的东西吗？谢谢。
最佳答案
您只包含 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>
关于javascript - Bootstrap 响应式 CSS 导航栏不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39060069/