Php 引导4的折叠导航栏_Php_Html_Css_Bootstrap 4

Php 引导4的折叠导航栏

php html css bootstrap-4

Php 引导4的折叠导航栏,php,html,css,bootstrap-4,Php,Html,Css,Bootstrap 4,我可以在我的代码中创建一个折叠的导航栏吗？因为如果我在mobile中打开导航栏，导航栏就不能折叠来创建一个？我试着制作一个按钮并将其设为假，但导航栏在桌面或手机上都不显示。这是我用来显示导航栏的代码 <nav class="navbar-default navbar-side navbar-collapse" role="navigation"> <div class="sidebar-collapse"> <ul class=

我可以在我的代码中创建一个折叠的导航栏吗？因为如果我在mobile中打开导航栏，导航栏就不能折叠来创建一个？我试着制作一个按钮并将其设为假，但导航栏在桌面或手机上都不显示。这是我用来显示导航栏的代码

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

有几件事：

在
在
```
collapse
```
div上没有
```
id=“collapsibleNavbar”
```
具有
```
id=“主菜单”
```

工作片段如下：

引导4导航栏：

它显示在我的代码片段中。。。你是说它不会出现在你的环境中？是否包含jquery.js、bootstrap.js、bootstrap.css文件引用？将其添加到css:

.navbar切换图标{背景图像：url（“数据：图像/svg+xml；字符集=utf8，%3Csvg viewBox='0 32'xmlns='0http://www.w3.org/2000/svg“%3E%3path stroke='rgba（255255255，1）“笔划宽度class='2'笔划线条帽class='round'笔划斜接限制class='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）；}

.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; 
    }
}