我无法在我的Django管理面板中显示下拉菜单

时间:2018-11-04 14:28:15

标签: javascript python html css django

嘿,我从事django项目已有一段时间了,但是我意识到我不太喜欢管理面板的样式,所以我决定重做

似乎不起作用的是,我有一个“查看网站”和“更改密码”链接,我想将它们放入下拉列表中以使其更整洁,但是当我执行该下拉列表时,它只是显示为白色:

https://gyazo.com/5b6c6f76ce39870cb26f11f83be52221

我的代码:

<div id="header" class = "navbar navbar-collapse fixed-top">
        <div id= "branding">
        {% block branding %}{% endblock %}
        </div>
        {% block usertools %}
        {% if has_permission %}
        <div id = "user-tools" style = "overflow: visible !important;">
        {% block userlinks %}
            <div class = "navbar-nav nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="overflow: visible !important;">
                Dropdown
                </a>
                 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                     {% if site_url %}
                     <a class="dropdown-item-text" href="{{ site_url }}">{% trans 'Visit Site' %}</a>
                     <a class="dropdown-item-text" href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a>
                     {% endif %}
                     {% if user.has_usable_password %}
                     <a class="dropdown-item-text" href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a>
                     {% endif %}
                </div>
            </div>
        </div>
        {% endblock %}
        {% endif %}
        {% endblock %}
        {% endif %}
        {% block nav-global %}{% endblock %}
    </div>

这些是我添加到头部的脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

0 个答案:

没有答案