Question

我的导航标题中有5个项目是＆＃34;罗嗦＆＃34;。当屏幕尺寸介于768px和992px之间时，菜单项将换行到我品牌下面的行。这会导致某些页面隐藏其内容，因为我的body标签padding-top未调整到导航高度。

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

我有点迷失在如何做到这一点上。我应该修改媒体断点以适应我的最小菜单大小＆＃34;，所以当它低于它时，它只是转换到可折叠版本而不是包装行/文本？或者我应该操纵容器大小等？

有任何想法/建议吗？

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

注意：作为临时修复，我只是制作了自己的身体＆＃34; padding-top＆＃34;更大，以适应包装，直到我能得到适当的解决方案。

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

Bootstrap 3 Nav标头包裹在768和992像素之间

1 个答案: