Question

Django，Bootstrap 4；

我有一个带有切换功能的导航栏：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark white scrolling-navbar" role="navigation">
  <div class="container">
    <a class="navbar-brand waves-effect" href="{% url 'product-list' %}">
      <img src="../../../media/Logo.png" width="40" class="d-inline-block align-top">
      <strong class="blue-text">Name</strong>
    </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">

      <!-- Left of navbar -->
      <ul class="navbar-nav mr-auto">
        {% if request.user.is_staff %}
        <li class="nav-item active">
          <a class="nav-link waves-effect" href="{% url 'product-create' %}">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-plus-square-o" aria-hidden="true"></i> Create Product </span>
          </a>
        </li>
        {% endif %}
        {% if request.user.is_staff or request.user|has_group:"limited_staff" %}
        <li class="nav-item active">
          <a class="nav-link waves-effect" href="{% url 'orders-view' %}">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-list-ul" aria-hidden="true"></i> 
              Orders
              <span class="badge badge-pill badge-danger">{% orders_count request.user %}</span>
            </span>
          </a>
        </li>
        {% endif %}
      </ul>

      <!-- Right of navbar -->
      <ul class="navbar-nav nav-flex-icons">
        {% if request.user.is_authenticated %}
        <li class="nav-item active">
          <a class="nav-link waves-effect" href="{% url 'product-list' %}"><span
              class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-bars" aria-hidden="true"></i> Products List </span>
          </a>
        </li>
        <li class="nav-item active">
          <a href="{% url 'cart-view' %}" class="nav-link waves-effect">
            <span class="clearfix d-none d-sm-inline-block" style="color: greenyellow;">
              <i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart </span>
              <span class="badge badge-pill badge-danger">{% cart_items_count request.user %}</span>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user" aria-hidden="true"></i> User Menu
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="{% url 'user-profile' %}">
              <span class="clearfix d-none d-sm-inline-block">
                <i class="fa fa-user" aria-hidden="true"></i> Profile </span>
            </a>
            <a class="dropdown-item" href="{% url 'order-history-view' %}">
              <span class="clearfix d-none d-sm-inline-block">
                <i class="fa fa-history" aria-hidden="true"></i> Order History </span>
            </a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="{% url 'user-logout' %}">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-sign-out" aria-hidden="true"></i> Logout </span>
          </a>
        </li>
        {% else %}
        <li class="nav-item">
          <a class="nav-link waves-effect" href="{% url 'product-list' %}">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-home" aria-hidden="true"></i> Home </span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="{% url 'user-login' %}">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-sign-in" aria-hidden="true"></i> Login </span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="{% url 'user-register' %}">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fa fa-user-plus" aria-hidden="true"></i> Signup </span>
          </a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

在小屏幕单击中，切换将展开，但不显示图标，而是显示空行。当我旋转手机时，它可以正常工作。我认为这与屏幕分辨率有关，但我不知道如何解决。

我可以确认jQuery和Bootstrap的顺序正确。

我正在使用这些：

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

谢谢。

编辑

点击前： here

点击后： here

Answer 1

情况是，只要您在移动设备上打开网页，它就会认为分辨率低于<= 568px，但您设置了d-none d-sm-inline或d-none d-sm-inline-block。

因此您所有的nav-links都具有display: none属性，因此它在您的移动设备中不可见，在您的横向视图中也不可见。

解决方法是，从您的所有d-none中删除span tag，然后将d-sm-inline-block替换为d-inline-block，将d-sm-inline替换为d-inline，如下所示例子。

<li class="nav-item active">
    <a class="nav-link waves-effect" href="{% url 'product-create' %}">
        <span class="clearfix d-inline-block">
              <i class="fa fa-plus-square-o" aria-hidden="true"></i> Create Product 
        </span>
    </a>
</li>

单击小屏幕后，导航栏切换不显示图标

编辑

1 个答案: