Кнопка переключения панели навигации - не выпадает

У меня есть домашняя страница Django, которая имеет Bootstrap navbar, и при изменении размера я заставляю его показывать кнопку переключения. Моя проблема в том, что когда эта кнопка переключения вступает в силу, я не могу выпадать элементы навигационной панели? Я не знаю, как это можно исправить.

Набросок того, как они выглядят (для примера): https://imgur.com/a/PyiUs38

Pastebin: https://pastebin.com/QqPiyVxf

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!--LOGO-->
      <a class="navbar-brand" style="pointer-events: none"> <!-- Unclickable -->
        <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
      </a>

      <!--MAIN NAV-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
        {% with request.resolver_match.url_name as url_name %}
        <ul class="navbar-nav">
          <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
            <a class="nav-link" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>
          <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
            <a class="nav-link" href="{% url 'projects' %}">Projects</a>
          </li>
          <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
            <a class="nav-link" href="{% url 'uses' %}">Uses</a>
          </li>
          <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
            <a class="nav-link" href="{% url 'contact' %}">Contact</a>
          </li>
        </ul>
        {% endwith %}
      </div>

      <!--SOCIALS-->
      <!-- Twitter -->
      <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
      <i class="fab fa-twitter"></i>
      </a>
      <!-- LinkedIn -->
      <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
      <i class="fab fa-linkedin-in"></i>
      </a>
      <!-- Github -->
      <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
      <i class="fab fa-github"></i>
      </a>
    </nav>

Связан ли html-файл с зависимостью Bootstrap JavaScript ? Она необходима для навигационных панелей.

Включите следующие JS библиотеки в ваш файл шаблона, прямо перед закрывающим тегом body,

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Обновленный рабочий сниппет с версией Bootstrap 5.1

Bootstrap 5.1

Я сделал следующие изменения в вашем коде

  • Я использовал Bootstrap 5.1 версии
  • Я изменил следующие атрибуты в элементе button
data-toggle="collapse" 
data-target="#navbarTogglerDemo02"

Изменено на

data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"

Пожалуйста, проверьте следующий рабочий фрагмент

Обновленный рабочий сниппет с версией Bootstrap 3.4.1

Примечание: Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью плагина dropdown JavaScript. Это означает, что вы должны вызывать выпадающее меню через javascript

Ex:

// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();

Пожалуйста, проверьте следующий рабочий фрагмент

Ссылка (мой очередной ответ на Stack Overflow): https://stackoverflow.com/a/69763221/3073842

Вернуться на верх