我不能让我的下拉列表显示在我的Django管理面板

Question

嘿，我已经做了一段时间的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>