html - 导航栏不会在正确的断点处折叠

Question

在一个正在处理的站点上，我用一个像素更改了断点。当你打开this page在768像素宽的窗口中，topmenu并没有消失，应该出现的菜单按钮也没有出现。

当宽度更改为 767 像素时，一切正常。

我不知道我在这里错过了什么。

Answer 1

您可以尝试更改@grid-float-breakpoint 和recompiling

来自navbar docs :

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

---

或者，如果你不想重新编译，取Skelly's code :

@media (max-width: <b>767px</b>) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Working Demo in jsFiddle