Question

我已经开发了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>

Answer 1

您的代码在我的Django / Bootstrap-project中工作正常。您应该仔细检查您是否已正确导入Bootstrap JS，因为这可能是汉堡包无法扩展的原因。尝试使用入门模板https://getbootstrap.com/docs/4.3/getting-started/introduction/，看看它是否有用：）

bootstrap导航栏汉堡菜单在Django应用中不起作用

1 个答案: