Почему мой переключатель не работает правильно, когда я использую статических бабочек?

Question

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

ПРИМЕЧАНИЕ : все остальное работает, выпадающий список, панель навигации (css / js)

ПРИМЕЧАНИЕ1: когда я использую CDN, все работает, включая переключатель

. Вот выдержки, которые я называю staticsfiles и ссылка на полный проект на github

settings.py

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'assets')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),
)

скриптов. html

{% load static %}

<script src="{% static 'jquery/dist/jquery.js' %}"></script>
<script src="{% static 'popper.js/dist/umd/popper.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Los Angeles Soccer Evolution</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="programsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Programs
            </a>
            <div class="dropdown-menu" aria-labelledby="programsDropdown">
              <a class="dropdown-item" href="#">Lion Cubs</a>
              <a class="dropdown-item" href="#">Evolution</a>
              <a class="dropdown-item" href="#">Lions</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Summer Camp</a>
          </li>
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="tournamentsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Tournaments
            </a>
            <div class="dropdown-menu" aria-labelledby="tournamentsDropdown">
              <a class="dropdown-item" href="#">3 vs 3</a>
              <a class="dropdown-item" href="#">Futsal</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Schools</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">About Us</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
'''

[Projeto no Github][1]

[1]: https://github.com/ChenGit55/LASE

Answer 1

Скорее всего, проблема вызвана тем, что на вашем сервере вы загружаете jQuery 3.5.0 или выше, а через CDN вы загружаете jQuery 3.4.1. См. Выпуск # 30553 .

Попробуйте загрузить jQuery 3.4.1 и использовать его. Похоже, это будет исправлено в Bootstrap 4.4.2