Question

使用Bootstrap构建网站。面包车有问题。我希望它以991px崩溃。在网上搜索并找到了这个代码，但它已经改变了导航的功能，因为导航器不会保持打开状态。有任何想法吗？用于覆盖默认值的代码在我的custom.css

中

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

}

Answer 1

尝试将上面的CSS更改为：

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

   .navbar-collapse.collapse.in {  /* NEW */
        display: block!important; 
    }
}

据我所知，这可以解决您网站上的问题。此建议可以归功于Dave Forber，请参阅Bootstrap 3 Navbar Collapse

Bootstrap折叠导航为991px

1 个答案: