想要使用引导程序在 992-1200 像素（大屏幕）的屏幕尺寸中显示切换栏。它仅出现在 992 像素以下的屏幕尺寸上

Question

在此我也想在大屏幕上显示切换栏，但它只出现在中等屏幕尺寸及以下。

我尝试使用显示属性，我能够在大屏幕的切换栏下隐藏我想要的组件，但无法在大屏幕及以下尺寸显示切换栏本身。

我还想知道这里指的是切换栏的类，以便我可以手动设置它的样式。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-bottom  header-sticky">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Logo -->
      <div class="col-xl-1 col-lg-1 col-md-1 col-sm-3">
        <div class="logo">
          <a href="/"><img src="{% static 'assets/img/logo/logoimage.jpg' %}" alt=""></a>
        </div>
      </div>
      <div class="col-xl-6 col-lg-8 col-md-7 col-sm-5">
        <!-- Main-menu -->
        <div class=" f-right d-none d-xl-block">
          <nav>
            <ul id="navigation">
              <li><a href="/">Home</a></li>

              <li class="hot"><a href="/category/">Products</a>
                <ul class="submenu">
                  <li><a href="/category/"> Categories </a>
                    <ul class="submenu">
                      {% for i in types %}
                      <li><a href="/category/#{{i.type}}"> {{i.type}} </a></li>
                      {% endfor %}


                    </ul>
                  </li>

                </ul>

              </li>
              <li><a href="/contact/">Contact</a></li>
              <li class="d-block d-lg-none">

                <a href="cart.html"><i class="fas fa-shopping-cart">Cart</i></a>

              </li>
              <li class="d-block d-lg-none"> <a href="/signup/" class="btn header-btn">Sign Up</a>
              </li>
              </li>
              <li class="d-block d-lg-none"> <a href="/login/" class="btn header-btn">Login</a>
              </li>



            </ul>
          </nav>
        </div>
      </div>
      <div class="col-xl-5 col-lg-3 col-md-3 col-sm-3 fix-card">
        <ul class="header-right f-right d-none d-xl-block d-flex justify-content-between">


          <li class="d-none d-xl-block">
            <div class="shopping-card">
              <a href="cart.html"><i class="fas fa-shopping-cart"></i></a>
            </div>
          </li>
          <li class="d-none d-xl-block"> <a href="/signup/" class="btn header-btn">Sign Up</a>
          </li>
          </li>
          <li class="d-none d-xl-block"> <a href="/login/" class="btn header-btn">Login</a>
          </li>
        </ul>
      </div>
      <!-- Mobile Menu -->
      <div class="col-12">
        <div class="mobile_menu d-block d-lg-none"></div>
      </div>
    </div>
  </div>
</div>
</div>
</div>

我的引导版本是：4.1.3

Answer 1

尝试在<nav> 标记中添加类navbar navbar-expand-xl。