如何使用Twitter引导更改导航栏折叠阈值
我在Rails 3.1.2项目中使用了Twitter Bootstrap 2.0.1，使用bootstrap-sass实现。 我正在加载bootstrap.css和bootstrap-responsive.css文件，以及bootstrap-collapse.js Javascript。
我有一个类似于示例的导航栏的流体布局。 这里遵循导航栏“响应变化”的说明。 它工作正常：如果页面比940px更窄，导航栏会折叠并显示一个“按钮”，我可以点击进行展开。
不过，我的导航栏看起来不错，大约550像素宽，也就是说，除非屏幕很窄，否则不需要折叠。
如果屏幕宽度小于550像素，我如何告诉Bootstrap只关闭导航栏？
请注意，此时我不想修改其他响应行为，例如叠加元素，而不是并排显示它们。
您正在寻找bootstrap-responsive.css第239行
@media (max-width: 979px) {...}
max-width值触发响应导航。 将它改为550px左右，它应该调整好。
Bootstrap> 2.1 && <3
2013年更新：简单的方法
（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);
您可以建立一个新的@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;
}
}
在下面的代码中，您可以看到我如何包含处理979px标记之前的979px的原始@media查询以及支持您希望的550px点的新查询。 我直接从引导响应css修改了原始查询，以重置应用于该导航栏元素的特定查询的所有样式，并将它们移植到带有您需要的拖放点的新查询中。 通过这种方式，我们可以将原始查询中的所有样式转换为新的查询，而不会在响应引导程序的样式表中混淆，这样默认值仍然适用于文档中的其他元素。
下面是一个简短的演示，其中媒体查询设置为在您需要时下降到550px ：http://jsfiddle.net/wU8MW/
注意：我将上面修改过的@media查询放在css框架下面，因为新的修改后的css应该比响应的css先加载。
上一篇: How to change navbar collapse threshold using Twitter bootstrap