如何在引導程序 4 中折疊導航欄

Question

我可以在我的代碼中制作一個折疊的導航欄，因為如果我在移動設備中打開導航欄不能折疊制作一個？ 我試圖制作一個按鈕並將其設為假，但導航欄未顯示在桌面或移動設備上。 這是我用來顯示導航欄的代碼

<nav class="navbar navbar-default navbar-cls-top navbar-expand-sm "  role="navigation">
                    <div class="navbar-header">
                        <a class="navbar-brand">AREZOU Intrade</a>
                       <button class="navbar-toggler bg-white" type="button" data-toggle="collapse" data-target=".dual-collapse" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>
</div>
  <div class="navbar-collapse dual-collapse collapse">

                         <ul class="navbar-nav d-sm-none">
     <li  class="nav-item">
      <a class="nav-link active-menu ukuran"  href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle ukuran"  id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
      <div class="dropdown-menu">
        <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
        <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
        <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>             
      </div>
    </li>

    <li  class="nav-item">
      <a class="nav-link active-menu ukuran"  href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
    </li>
  </ul>
    </div>

Answer 1

bootstrap 類d-sm-none意味着該元素將被設置為display: none在小斷點及以上。 這就是導航不顯示在桌面上的原因。 從<ul>元素中刪除此類。

此外，您所談論的響應功能不能單獨與 Bootstrap 一起使用。 您還需要包含下面的 javascript 文件。 這在Bootstrap 文檔中進行了解釋。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

最后，您的示例缺少結束</nav>標記。

這是一個代碼筆，顯示您的代碼在解決上述問題后工作。