更改导航栏折叠宽度 Twitter Bootstrap 3答案

【问题标题】：Change navbar collapse width Twitter Bootstrap 3更改导航栏折叠宽度 Twitter Bootstrap 3
【发布时间】：2014-03-10 15:00:02
【问题描述】：

我正在尝试练习如何在 Bootstrap 3 中修改导航栏的折叠宽度，以便它以较早的宽度折叠。我找到了几个建议，但似乎都没有。我得到的最接近的是这篇文章中的代码Twitter Bootstrap 3 navbar-collapse - set width to collapse

这是该帖子使用的内容：

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

}

这会导致崩溃在我想要的时候发生，但是它同时打破了崩溃。折叠按钮在它应该出现的时候出现，但是当我点击它时，菜单只出现一秒钟，然后自动关闭。有没有办法停止自动关闭？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

有一个非常简单的方法可以做到这一点，

Click here to customize Bootstraps LESS variables
将@grid-float-breakpoint更改为您选择的大小
点击编译下载
在您的页面上使用生成的 CSS！

【讨论】：

我尝试过使用@grid-float-breakpoint，但这似乎也不起作用。我将它设置为 1080px，编译并下载它，将那个 CSS 文件复制到我现有的文件上，问题仍然存在。

【解决方案2】：

对于 Bootstrap 3.1，导航栏与 3.0 相比略有变化，因此对用于覆盖断点的 CSS 进行了一些更改。

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
       float: none!important;
   margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

http://www.bootply.com/120604

【讨论】：