Bootstrap v3.3折叠导航为768px

Question

我无法让我的Bootstrap v3.3.0导航在768px断点处崩溃。

我设置此https://jsfiddle.net/wfx35s1v/2/来证明问题。

我添加了我在某处找到的代码（抱歉，如果我能找到来源，我会提供链接）：

@media (max-width: 768px) {
    .navbar-collapse.in { overflow-y: auto !important; }
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}

这是我的jsFiddle分支，其中包含以下代码段：https://jsfiddle.net/ws78kmf0/1/

该片段强制导航崩溃。哪个好。但是当你想要切换导航时，那是行不通的。

如果可能的话，我很感激帮助使用CSS让导航器在768px处崩溃。