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

Question

我刚刚创建了一个垂直 Bootstrap 导航栏，它看起来像这样:

现在我的问题是当我在手机上测试应用程序时，它没有崩溃，而是消失了，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">