引导程序3中带切换的左侧边栏不工作

我正在尝试修改此处显示的引导模板 https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle 所以它包括一个顶部导航栏和一个页脚。

我的应用程序需要左侧边栏作为页面的完整高度(减去顶部导航栏和页脚),并用于滚动内容区域。

我创造了一把小提琴来展示我到目前为止的成就: https://jsfiddle.net/y9khea25/1/

我遇到的问题是切换边栏的按钮, #menu-toggle ,当 main 有 .active 类已移除(即当左侧边栏“折叠”时)。这意味着用户无法重新打开侧边栏。

我已经根据原始bootsnip中的内容调整了标记。其中一部分意味着他们最初拥有的东西 .page-content-wrapper 现在在里面 主要的 然后使用引导程序 .col 课程。我不知道这是否导致了一个单独的问题?

<main class="active">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation">

                <a id="menu-toggle" href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>

                <ul>
                    <li>item 1</li>
                </ul>
            </div>

            <div class="content col-xs-12 col-sm-9 col-md-10">
            <!-- page content -->
            </div>
    </div>
</main>

我很感激关于如何解决这个问题的建议。此外,如果有人有任何更好的教程如何在引导3中实现相同的效果,那么我会感兴趣-我搜索了他们,但找不到任何。