【问题标题】:my navbar dropdown menu is not working in django project using bootstrap4我的导航栏下拉菜单在使用 bootstrap4 的 django 项目中不起作用
【发布时间】:2020-05-14 05:53:59
【问题描述】:

从教程构建我的第一个 Django 应用程序,几乎一字不差地按照说明进行操作,但我的导航栏下拉菜单不起作用,我无法注销或更改密码。

这是我的 base.html 文件,我不知道 html 我从教程中复制了这段代码,也许我弄乱了任何东西,请看看并帮助我解决问题,谢谢 :)

<!-- templates/base.html -->

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
    uXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">


    <title>{% block title %}Bk - Newspaper App {% endblock title %}</title>

</head>

<body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
        <a class="navbar-brand" href="{% url 'home' %}">Bk-Styles-007</a>
    {% if user.is_authenticated %}
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="{% url 'article_new' %}">+ New</a></li>
        </ul>
    {% endif %}

    <button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarCollapse" aria-controls="navbarCollapse"
    aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">

        {% if user.is_authenticated %}
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="userMenu"
                       data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        {{ user.username }}
                    </a>

                    <div class="dropdown-menu dropdown-menu-right"
                        aria-labelledby="userMenu">
                        <a class="dropdown-item"
                        href="{% url 'password_change' %}">Change password</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'logout' %}">
                        Log Out</a>
                    </div>
                </li>
            </ul>
        {% else %}

            <form class="form-inline ml-auto">

                <a href="{% url 'login' %}" class="btn btn-outline-secondary">
                Log In</a>
                <a href="{% url 'signup' %}" class="btn btn-primary ml-2">
                    Sign up</a>

            </form>

        {% endif %}

    </div>

    </nav>

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



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
    crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ/6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>

</body>

**我更新到

<li class="nav-item dropdown">

但仍然面临同样的问题。

.**

【问题讨论】:

    标签: python html css django bootstrap-4


    【解决方案1】:

    我无法完整重现您的问题,但是您在第 20 行(紧跟在 {% if user.is_authenticated %} 之后)中的 li 标记缺少引导程序中名为 dropdown 的类。

    所以在第 20 行而不是

    <li class="nav-item">
    

    应该是

    <li class="nav-item dropdown">
    

    如果这不能完全解决您的问题,我建议您编辑您的问题并添加整个代码(也许您没有导入 Bootstrap Javascript?我无法仅使用此代码 sn-p 知道) .

    编辑

    好的,既然你发布了你的整个代码,我发现它有什么问题。正如怀疑的那样,javascript 代码未正确导入,因为 您的脚本标签中的 SHA 哈希值、参数完整性无效。这是一个非常重要的功能,可确保您从以下位置导入正确的代码CDN(不是一些恶意代码)。由于您正在学习教程,因此您可能得到一个不再有效的哈希值。

    我建议从他们的网站获取 Bootstrap 4 的 most up to date version(在撰写本文时,它是 4.5)。用这些替换您的导入,它应该可以工作。为了节省您的时间,我复制了新信息:

    CSS:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    

    JS:

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    

    如果你真的需要4.1.3版本的Bootstrap,可以在this site找到,不过我猜你不需要。首选最新版本。

    【讨论】:

    • 感谢 Daniel 帮助我,但它无法解决我的问题我正在更新我的问题,希望您多看 1 次来帮助我。非常感谢。 :)
    • @MBilalAsgher 既然您发布了完整的代码,我发现了错误。正如怀疑的那样,javascript 代码没有正确导入
    • 谢谢@Daniel 非常感谢它真的对我有很大帮助我只需复制并粘贴您建议的代码就可以在几秒钟内解决我的问题。再次感谢好友。
    • @MBilalAsgher 我很高兴它有帮助 =)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-10
    • 2018-03-17
    • 1970-01-01
    相关资源
    最近更新 更多