Question

我需要一些折叠导航栏的帮助。在较小的设备上它工作正常，但平板电脑肖像，因为导航中断菜单中的链接太多，如何让折叠导航也在平板设备上显示。

我不使用LESS而且我已阅读BS自定义页面上的文档，但不明白要更改的字段：

@网格浮子断点-MAX

What do I add here... 

Point at which the navbar becomes uncollapsed.

@网格浮子断点

What do I add here... 

Point at which the navbar becomes uncollapsed.

任何帮助他都会赞赏。非常感谢！

Answer 1

如果您不使用LESS并且不想自定义Bootstrap构建，则可以使用CSS媒体查询来覆盖折叠断点。只需确保此CSS遵循bootstrap.css ..

@media (max-width: 990px) {
    .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;
    }
}

http://www.bootply.com/105915

Answer 2

您无需定义@grid-float-breakpoint-max;默认情况下，它是从@grid-float-breakpoint自动计算的。

如果用户的视口（其位置过于简单，是他们的屏幕）的宽度至少为@grid-float-breakpoint，则导航栏将显示为未折叠（即导航栏项目将显示在水平行中）。如果视口比那个窄，则导航栏将折叠为一个可垂直显示导航栏项目的可切换菜单。

断点Bootstrap 3

2 个答案: