Блог

Главная - Вопросы по программированию - Складной гамбургер на панели навигации не работает в начальной загрузке (автономный режим)

Складной гамбургер на панели навигации не работает в начальной загрузке (автономный режим)

#bootstrap-4

#начальная загрузка-4

Вопрос:

Загрузочный гамбургер, который появляется на панели навигации при изменении размера окна, не реагирует на щелчок. Вот как я его настроил:

 <script src="/static/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">
<script src="/static/bootstrap.min.js"></script>
<script src="/static/popper.min.js"></script>

Это мой макет:

 <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="navbar-collapse collapse" id="navbarColor02" style="">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{url_for('core.index')}}">Home</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href=" {{url_for('core.about')}}">About</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Log Out</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Account</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Create Post</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Log In</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>
        </div>
    </nav>

    <script src="/static/jquery.min.js"></script>
    <script src="/static/popper.min.js"></script>
    <script src="/static/bootstrap.min.js"></script>

    <div class="container">
        {% block content %}

        {% endblock %}
    </div>

</body>
</html>

Вот как это выглядит: скриншот.

И я ожидаю, что это будет выглядеть так: рабочий гамбургер.

Проблема в том, что он не реагирует на щелчок. Как это исправить? Важное примечание: я пытаюсь настроить его в автономном режиме. С онлайн-ссылками на css и js-файлы все работает хорошо.

Комментарии:

1. Добро пожаловать в Stack Overflow! Из вашего вопроса неясно, в чем проблема. Не могли бы вы отредактировать его, чтобы уточнить, что именно вы ожидаете, и что произойдет вместо этого?

2. Гамбургер не открывается, как показано на рисунке. Я добавлю скриншот, чтобы описать желаемый результат. Спасибо

3. Я заметил, что в вашем html есть пробел, где его не должно быть: data- toggle="collapse" должно быть data-toggle="collapse" . Поможет ли это, если вы уберете пробел?

4. Моя ошибка, ошибка при вставке, она без пробела, и теперь я ее исправил. Все еще не работает