Javascript 引导-折叠菜单不工作

我为我们正在构建的仪表板编写了代码；这是一个免费的引导仪表板模板：

我们非常喜欢它，因为它很简单，并且显示了我们需要的布局。以下是我迄今为止为满足我们的需要而编辑上述内容所做的工作：

如果您调整浏览器的大小，以便使用原始模板缩小宽度，一旦它达到（我假设）xs或sm大小，侧边栏菜单将整齐隐藏，右上角的3line按钮将显示。你可以看出我是新手

如果您调整我的版本的大小，一旦它达到（我假设）xs或sm大小，sidbar菜单将显示而不是隐藏，就像在原始模板中一样

如果有帮助的话，我注意到当我从模板编辑到我的版本时，当我开始从原始模板中移除容器时，当调整浏览器窗口的大小时，菜单停止隐藏

当我们想在手机上使用此仪表板时，我必须了解如何在移动设备上浏览此菜单时将其隐藏。。。希望你能帮忙，谢谢

<div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Overview</a>
                    </li>
                    <li>
                        <a href="#.html"><i class="fa fa-external-link-square fa-fw"></i> Allocation</a>
                    </li>
                    <li>
                        <a href="#.html"><i class="fa fa-table fa-fw"></i> Events & Stages</a>
                    </li>
                    <li>
                        <a href="#.html"><i class="fa fa-comment fa-fw"></i>Correspondence Log</a>
                    </li> 
                    <li>
                        <a href="#.html"><i class="fa fa-folder-open fa-fw"></i>Resources</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>

您缺少围绕ul类的

请参阅此处的文档>


/*！
*启动引导-SB Admin 2引导引导管理主题(http://startbootstrap.com)
*根据Apache许可证v2.0许可的代码。
*有关详细信息，请参阅http://www.apache.org/licenses/LICENSE-2.0.
*/
身体{
背景色：#F8；
}
#包装纸{
宽度：100%；
}
#页面包装器{
填充：0 15px；
最小高度：568px；
背景色：#fff；
}
@介质（最小宽度：768px）{
#页面包装器{
职位：继承；
利润率：0 250像素；
填充：0 30px；
左边框：1px实心#e7e7e7；
背景色：#fff；
}
}
.导航栏静态顶部{
右边距：0；
背景色：#fff；
}
.导航栏顶部链接{
右边距：0；
背景色：#fff；
}
.导航栏顶部链接李{
显示：内联块；
}
.navbar顶部链接李：最后一个孩子{
右边距：15px；
}
.navbar顶部链接li a{
填充：15px；
最小高度：50px；
}
.导航栏顶部链接.下拉菜单li{
显示：块；
}
.navbar顶部链接。下拉菜单li：最后一个孩子{
右边距：0；
}
.导航栏顶部链接.下拉菜单LIA{
填充：3px20px；
最小高度：0；
}
.navbar顶部链接.下拉菜单li a div{
空白：正常；
}
.navbar顶部链接。下拉消息，
.navbar顶部链接。下拉任务，
.导航栏顶部链接.下拉警报{
宽度：310px；
最小宽度：0；
}
.导航栏顶部链接.下拉消息{
左边距：5px；
}
.导航栏顶部链接.下拉任务{
左边距：-59px；
}
.导航栏顶部链接.下拉警报{
左边距：-123px；
}
.navbar顶部链接。下拉用户{
右：0；
左：自动；
}
.侧栏.侧栏-导航.导航栏-折叠{
右边填充：0；
左侧填充：0；
}
.侧边栏.侧边栏搜索{
填充：15px；
}
.侧边栏ul li{
边框底部：1px实心#e7e7e7；
}
.侧边栏ul li a.active{
背景色：#eee；
}
.侧边栏.箭头{
浮动：对；
}
.sidebar.fa.箭头：之前{
内容：“\f104”；
}
.sidebar.active>a>.fa.箭头：之前{
内容：“\f107”；
}
.侧栏.导航二级李，
.侧栏.导航三级李{
边框底部：0！重要；
}
.侧栏.导航二级李a{
左侧填充：37px；
}
.侧栏.导航三级李a{
左侧填充：52px；
}
@介质（最小宽度：768px）{
.侧边栏{
z指数：1；
位置：绝对位置；
宽度：250px；
边缘顶端：51px；
}
.navbar顶部链接。下拉消息，
.navbar顶部链接。下拉任务，
.导航栏顶部链接.下拉警报{
左边距：自动；
}
}

切换导航



























能否将代码发布到您的侧边栏中，这样我们就不必转到页面源代码？如何添加代码/