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

引导程序类d-sm-none意味着该元素将在较小的断点及更高处设置为display: none。这就是为什么导航不显示在桌面上的原因。从<ul>元素中删除此类。

此外，您所讨论的响应功能不能单独与Bootstrap一起使用。您还需要在下面添加JavaScript文件。 Bootstrap documentation对此进行了说明。

<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>。

解决上述问题后，

Here is a codepen showing your code working。

如何在引导程序4中折叠导航栏

1 个答案: