html - Bootstrap 侧边栏未按预期折叠

Question

这个问题来自我之前问过的一个问题，但这是一个单独的问题：Bootstrap 3 中的带切换的左侧边栏不起作用

jsfiddle 在这里：https ://jsfiddle.net/y9khea25/1/

我已经实现了答案（在本地副本上），它整理了汉堡菜单的位置以打开/关闭左侧边栏。

但是，当我将浏览器窗口的大小调整到媒体查询中的断点时(max-width:767px) ，我得到以下信息：

正在使用媒体查询，因为左侧边栏应该在断点处折叠：

    @media (max-width:767px) {
        main {
            padding-left: 70px;
            transition: all .4s ease 0s;
        }
        #sidebar {
            left: 70px;
        }
        main.active {
            padding-left: 150px;
        }
        main.active #sidebar {
            left: 150px;
            width: 150px;
            transition: all .4s ease 0s;
        }
    }

我不知道问题是否是由于我在内部<main>、.col-sm-3 .col-md-2左侧边栏和.col-xs-12 .col-sm-9 .col-md-10内容中使用了以下 Bootstrap 类。但是这是必需的，因为我想要侧边栏和内容的那些列比例。我不明白它们是否被使用，因为 #sidebar在 CSS 中有 150px 的固定宽度。

当我遇到这个问题时，请有人帮忙吗？

小提琴上显示的效果是正确的，除了在断点处我希望左侧边栏处于“折叠”位置，并且能够使用汉堡菜单（）重新打开它#menu-toggle。

标签： htmlcsstwitter-bootstrap