html - 引导下拉菜单未直接出现在导航栏按钮下

Question

我对引导程序和 html/css 很陌生，如果这可能是一个明显的问题，我很抱歉。我正在开发一个 Django 项目，我目前正在尝试将导航栏按钮作为下拉菜单来提供多个不同的选项。就像您通常在许多网站的个人资料下拉列表中看到的一样。目前我可以让它工作，但下拉菜单出现在页面的最左侧，而不是像您期望的那样直接位于按钮下方。我按照导航栏上的引导文档进行操作，但它似乎仍然只显示在左侧。有什么我想念的吗？

以下是网站上当前的输出：

这是html代码：

    <header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-jj fixed-top">
      <div class="container">
        <a class="navbar-brand mr-4 jjfont" href="/">
          <i class="material-icons">logo</i>   WEBSITE NAME</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
          <div class="navbar-nav mr-auto">
            <!-- Navbar Left Side Goes Here -->
          </div>
          <!-- Navbar Right Side -->
          <div class="navbar-nav">
            {% if user.is_authenticated %}
              <!-- home icon -->
              <a class="nav-item nav-link" href="/">
                <i class="material-icons">home</i>
              </a>
              <!-- create icon -->
              <a class="nav-item nav-link" href="{% url 'post-create' %}">
                <i class="material-icons">post_add</i>
              </a>
              <!-- messages icon -->  
              <a class="nav-item nav-link" href="#">
                <i class="material-icons">chat</i>
              </a>
              <!-- profile icon -->
              <a class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" href="#" id="navbarDropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">face</i>
              </a>
                  <div class = "dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'profile' %}">Profile</a>
                    <a class="dropdown-item" href="{% url 'logout' %}">Settings</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
                  </div>
            {% else %}
              <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
              <a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
            {% endif %}
          </div>
        </div>
      </div>
    </nav>

标签： htmlcssdjangobootstrap-4