Question

我可以在代码中制作一个折叠的导航栏，因为如果我在移动设备中打开，导航栏就不能折叠成一个？我尝试将按钮设为假，但导航栏未在桌面或移动设备上显示。这是我用来显示导航栏的代码。

<nav class="navbar-default navbar-side navbar-collapse" role="navigation">
        <div class="sidebar-collapse">

          <ul class="nav" id="main-menu">
            <li>
              <a class="active-menu ukuran"  href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-item 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>
              <a class="active-menu ukuran"  href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
            </li>
          </ul>   
        </div>    
      </nav>

像这样的CSS代码

.navbar-side {
    border: none;
    background-color: #d5f0f3;
    height: 100%;
}
.sidebar-collapse .nav > li > a {
    color:#000;
    background-color: #d5f0f3;;
    text-shadow:none;

}


.navbar-cls-top .navbar-brand{
    color: #00c900;
    background: #d5f0f3;
    text-align: center;
    height: 50px;
    font-size: 40px;
}
.dropdown a {
    padding-left: 8px;
}

@media(min-width:768px) {
    .navbar-side {
        z-index: 1;
        position: absolute;
        width: 260px;
    }

    .navbar {
        border-radius: 0px; 
    }
}

Answer 1

几件事：

<nav>上没有扩展类
在id="collapsibleNavbar" div上没有collapse
在id="main-menu"上的div中缺少相关的类

工作片段如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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 class="navbar navbar-expand-md bg-dark navbar-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav" id="main-menu">
      <li>
        <a class="active-menu ukuran" href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-item 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>
        <a class="active-menu ukuran" href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

bootstrap 4导航栏：

<html>
 <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".dual-collapse" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse dual-collapse collapse">
    <ul class="navbar-nav">
     <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>
</nav>
</body>
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>

折叠的导航栏，用于引导程序4

2 个答案: