Bootstrap 3 - 导航栏可折叠至990px

Question

我有这个问题.Bootstrap 3框架在屏幕宽度达到767px时将导航栏更改为可折叠版本(移动版).我想改变它,移动版本存在,直到991px.我见过类似的问题,但正确的答案对我来说无法使用.它说它可以在下载自定义版本的Bootstrap时设置,为可折叠导航栏设置所需的值.问题是,我将它与Drupal 7一起使用,自动提供Bootstrap版本形成这个url:netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css.

所以我必须在我的自定义css文件中覆盖这个值,但我知道要改变什么 - 我相信有很多类要改变.顺便说一句,它可能很重要,我不使用LESS版本.

问候,大卫

Answer 1

你可以像这样覆盖它..

@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://bootply.com/105915