Django раскрывающееся меню не работает с тэгом 'load bootstrap3' - PullRequest
Новая
       5

Django раскрывающееся меню не работает с тэгом 'load bootstrap3'

0 голосов
/ 22 февраля 2020

Я создаю веб-сайт с django, и у меня есть раскрывающееся меню, например: 

<li class="dropdown">
  <a data-toggle="dropdown" href="#">{{ user.username }}</a>
  <ul class="dropdown-menu dropdown-menu-left">
    <li><a href="{% url 'users:profile' user.username %}">Profile</a></li>
    <li><a href="#">Requests</a></li>
    <li><a href="{% url 'booking:cars' %}">Your cars</a></li>
    <li><a href="#">Your reservations</a></li>
  </ul>
</li>

Если я go на странице, которая содержит этот кусок кода: 

{% load bootstrap3 %} 
{% bootstrap_javascript jquery='full' %}

Раскрывающееся меню не работает, но если я удаляю 2 строки выше, выпадающее меню работает нормально.

Зная, что мне нужно сохранить эти 2 строки, как я поступаю, чтобы решить эту проблему

1 Ответ

0 голосов
/ 24 февраля 2020

вам нужно следовать последовательности сначала bootstrap.css файл, второй jquery.js, затем popper.js, а затем boostrap.js не забыл связать popper.js этот файл используется для открытой модели

  • boostrap. css с использованием тега ссылки
  • jquery. js с использованием тега script
  • popper. js с использованием тега script
  • bootsrap. js используя скрипт-тег 
<head>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

я даю ссылку CDN, вставленную в ваш код, в противном случае скачайте этот файл и свяжите их, я дал вам вышеуказанные материалы, следуйте этой последовательности и не забыли proper.js или jquery.js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  • , если эта работа, тогда сделайте правильный ответ, если не работает, пожалуйста, дайте ошибку консоли, которая покажет вас в вашем браузере,
...