引导导航栏汉堡菜单在 django 应用程序中不起作用答案

【问题标题】：bootstrap navbar hamburger menu does not work in django app引导导航栏汉堡菜单在 django 应用程序中不起作用
【发布时间】：2020-11-05 19:19:10
【问题描述】：

我开发了一个 django 应用，但由于某种原因，引导导航栏不会在手机上显示菜单项

每当我在移动设备的网络浏览器上运行我的应用程序时，汉堡菜单都不会扩展以显示我的导航项目...这很奇怪。

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#"><img src="{% static 'images/logo.png' %}"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          {% if user.is_authenticated %}
          <ul class="navbar-nav mr-auto">
          <li class="nav-item">
             <a class="nav-link" href="{% url 'dashboard:transactions' %}">Transactions</a>
           </li>
          <li class="nav-item">
             <a class="nav-link" href="{% url 'dashboard:quote' %}">Quote Tool</a>
           </li>
          <li class="nav-item">
             <a class="nav-link" href="{% url 'dashboard:tracking' %}">My Projects</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="{% url 'dashboard:home' %}">Home</a>
           </li>
              <a class="nav-link" href="{% url 'dashboard:support' %}">Support</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'logout' %}">Logout</a>
            </li>
            </li>
          </ul>
          {% else %}
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'register' %}">Sign up</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'login' %}">Login</a>
            </li>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="{% url 'dashboard:home' %}">Home</a>
            </li>
           <li class="nav-item">
             <a class="nav-link" href="{% url 'dashboard:quote' %}">Quote Tool</a>
           </li>
          </ul>
    </div>
          {% endif %}
        </div>
    </nav>

【问题讨论】：

标签： html css django bootstrap-4 nav

【解决方案1】：

您的代码在我的 Django/Bootstrap 项目中运行良好。您应该仔细检查您是否正确导入了 Bootstrap JS，因为这可能是汉堡包无法展开的原因。尝试使用入门模板https://getbootstrap.com/docs/4.3/getting-started/introduction/ 看看它是否有效:)

【讨论】：