Bootstrap 3 Nav 标题在 768 到 992 像素之间换行

Question

我的导航标题中有 5 项有点“罗嗦”。当屏幕尺寸在 768px 和 992px 之间时，菜单项会换行到我的品牌下方的行。这会导致某些页面的内容隐藏，因为我的 body 标签 padding-top 没有调整到导航高度。

一旦低于 768 像素，它就会转换为引导程序为所有内容所做的默认折叠菜单项。

我有点不知道如何做到这一点。我是否应该修改媒体断点以适应我的“最小菜单大小”，所以当它低于该值时，它只是转换到可折叠版本而不是换行/文本？还是我应该操纵容器大小等？

有什么想法/建议吗？

这里是网站：http://wrestlestat.apphb.com

注意：作为临时修复，我只是让我的身体“填充顶部”更大以适应包裹，直到我能得到正确的修复。

Answer 1

您可以使用媒体查询覆盖 CSS，以像这样在 990 像素处折叠导航栏..

http://www.bootply.com/117227

@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;
    }
}