Кнопка переключения навигационной панели Bootstrap 4 Отображается, но не открывает меню
Я использую Bootstrap 4 для своего проекта на Django, и моя кнопка переключения навигационной панели появляется при уменьшении размера экрана. Однако при нажатии на кнопку ничего не происходит — меню не раскрывается и не сворачивается.
Вот мой код:(base.html)
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyLog - {% block title %}Home{% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="icon" type="image/svg+xml" href="{% static 'images/airplane-svgrepo-com.svg' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><b>SkyLog</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link mx-3 active" aria-current="page" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="#">LogBook</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="#">Search</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="#">Analytics</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
{% block content %}
<!-- Page content goes here -->
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-fQybjgWLrvvRgtW6jwXnDdRjjvQcTbLrR9fOr5bT8i4QgFO44FtfFZ4lAAey7m70"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-Uo5Xkna0FgAq06YLyj2hx5Lu5A5xN1W6zVnHJvaApGsXOMA5ol3KSk2EjPmhoUmR"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy5E2fHk1hCwLlG5OWv9F7JqxMk5DQCVRHsENBO"
crossorigin="anonymous"></script>
</body>
</html>
Я включил Bootstrap 4.3.1 CSS и JS из каталога CDN. Я использовал data-toggle="свернуть" и data-target="#navbarNav" для кнопки. Панель навигации находится внутри с помощью navbar-развернуть-lg-панель навигации-затемнить-bg-затемнить. Перед закрытием я включил jQuery, Popper.js и Bootstrap JS в свой . Я подозреваю, что jQuery или Bootstrap JS могут загружаться неправильно, или в моих скриптах может быть конфликт. Что может быть причиной этой проблемы?