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

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

1 个答案: