如何使用Twitter bootstrap-responsive来更改导航栏崩溃阈值？

Question

我在Rails 3.1.2项目中使用Twitter Bootstrap 2.0.1,使用bootstrap-sass实现.我正在加载文件bootstrap.css和bootstrap-responsive.css文件,以及bootstrap-collapse.jsJavascript.

我有一个带有类似示例的导航栏的流畅布局.这遵循此处的导航栏"响应变化"说明.它工作正常:如果页面比约940px窄,导航栏会折叠并显示一个"按钮",我可以单击该按钮进行展开.

然而,我的导航栏看起来很好,大约550px宽,即它不需要折叠,除非屏幕非常窄.

如果屏幕宽度小于550px,我如何告诉Bootstrap仅折叠导航栏？

请注意,在这一点上我不希望修改其它响应行为,如堆叠的元素,而不是并排显示他们一边.

Answer 1

Bootstrap> 2.1 && <3

• 使用较少版本的bootstrap
• 在variables.less中更改@navbarCollapseWidth变量
• 重新编译.

2013年更新:简单的方法

• 访问http://getbootstrap.com/customize/#less-variables
• 在表单域中更改@navbarCollapseWidth
• 单击"编译和下载".

(通过评论THX到Archonic)

更新2014:Bootstrap 3.1.1和3.2 (他们甚至将其添加到文档中)

如果您正在自定义或覆盖/编辑.less变量,那么您正在寻找:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Answer 2

您正在寻找239行 bootstrap-responsive.css

@media (max-width: 979px) {...}

当max-width值触发响应导航.将它更改为550px左右,它应该调整大小.

Answer 3

您可以建立一个新@media查询以根据需要放下导航栏元素,您只需重置前者以适应具有所需下拉宽度的新查询.以此为例:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

在下面的代码中,您可以看到我如何包含@media处理979px标记之前的drop 的原始查询以及支持所需drop point的新查询550px.我直接从bootstrap-responsive css修改了原始查询,以重置应用于导航栏元素的特定查询的所有样式,并将它们移植到带有您需要的放置点的新查询.通过这种方式,我们可以将原始查询中的所有样式传递到新查询,而不会在引导响应样式表中乱七八糟,这样默认值仍将应用于文档中的其他元素.

这是一个简短的演示,可以550px根据需要设置媒体查询:http: //jsfiddle.net/wU8MW/

注意:我将上面修改过的@media查询放在css框架下面,因为新修改的css应该首先加载而不是响应式css.

Answer 4

bootstrap-sass将在下一个版本(2.2.1.0)中支持变量$ navbarCollapseWidth.一旦该版本生效,您将能够更新它以完全按照您的要求进行操作!

Answer 5

截至2013年8月,可以在http://getbootstrap.com/customize/找到Bootstrap 3"自定义和下载"页面.

使用Bootstrap 3,相关变量是@ grid-float-breakpoint.

以下Stack Overflow页面包含其他详细信息:Bootstrap 3 Navbar Collapse