在移动设备上测试时，导航栏不会折叠

Question

我刚刚创建了一个垂直引导程序导航栏，它看起来像这样：

现在我的问题是，当我在手机上测试应用程序时，它不会折叠，只会消失，并且不会出现3行。

以下是代码：

<div class="navbar-collapse collapse">
          <ul class="sidebar-menu">
            <li class="header">MAIN MENU</li>

            <li class="treeview">
              <a href="#">
                <i class="fa fa-dashboard"></i> <span class="glyphicon glyphicon-home"> Home</span> <i class="fa fa-angle-left pull-right"></i>
              </a>
            </li>
                        <li class="treeview">
              <a href="#">
                <i class="fa fa-edit"></i><span class="glyphicon glyphicon-folder-open"> Patients</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-files-o"></i>
                <span class="glyphicon glyphicon-calendar"> Appointments</span>
                <span class="label label-primary pull-right">4</span>
              </a>
            </li>
            <li>
              <a href="widgets.html">
                <i class="fa fa-th"></i> <span class="glyphicon glyphicon-list-alt"> Daily Reports</span> <!--<small class="label pull-right bg-green">income reports</small>-->
              </a>
            </li>
            <li>
              <a href="widgets.html">
                <i class="fa fa-th"></i> <span class="glyphicon glyphicon-list"> Monthly Reports</span> <!--<small class="label pull-right bg-green">income reports</small>-->
              </a>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-pie-chart"></i>
                <span class="glyphicon glyphicon-credit-card"> Debts</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-laptop"></i>
                <span class="glyphicon glyphicon-usd"> Outlay</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>

            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-table"></i> <span class="glyphicon glyphicon-scale"> Statistics</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-table"></i> <span class="glyphicon glyphicon-plus"> Equipments/Tools</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
            </li>
        </ul>
    </div>

Answer 1

您是否故意不将button代码粘贴到您的问题中？

如果没有，您还应该具备以下条件：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#uniqueid" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
</button>

您还需要在菜单包装器中添加id：

<div class="navbar-collapse collapse" id="uniqueid">