我在一个使用了bootstrap-sass的Rails 3.1.2项目中使用Twitter Bootstrap 2.0.1。我同时加载bootstrap.css和bootstrap-responsive.css文件，以及bootstrap-collapse.js Javascript文件。
我的布局是流式的，具有类似于示例中的导航栏。这遵循了这里的导航栏“响应式变化”说明。它工作得很好：如果页面小于约940像素，导航栏就会折叠，并显示一个我可以点击展开的“按钮”。
然而，我的导航栏看起来好像只需要折叠到大约550像素宽度以下，也就是说，除非屏幕非常窄，否则不需要折叠。
如何告诉Bootstrap仅在屏幕小于550像素宽度时才折叠导航栏？
请注意，此时我不想修改其他响应式行为，例如将元素堆叠而不是并排显示。
2013年更新：简单方法
(感谢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);
@navbarCollapseWidth: 600px;的内容，那么这也适用于twitter-bootstrap-rails gem。 - sffc你正在寻找bootstrap-responsive.css文件中的第239行。
@media (max-width: 979px) {...}
将 max-width 值更改为550像素左右，就可以触发响应式导航。然后它应该可以很好地进行调整大小。
bootstrap-responsive.css 文件嵌在 bootstrap-sass 宝石中。虽然我可以编辑它，但是当宝石更新时，我需要再次进行编辑。是否有一种类似于覆盖其他 CSS 元素的方法来覆盖 @media 查询？ - Mark Berry@media (max-width: 767px)影响的导航栏。 希望Bootstrap（或bootstrap-sass）将来能够包含使用变量设置阈值的方法，但我认为这将需要在媒体选择器中进行插值。 - Mark Berry你可以建立一个新的@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 标记之前的下拉菜单以及新的查询以支持您所需的 550px 下降点。我直接从 bootstrap-responsive css 中修改了原始查询，以重置应用于导航栏元素的所有样式，并将它们移植到新查询中，该查询带有您需要的下降点。通过这种方式，我们可以将所有样式从原始查询都转移到新查询中，而不会在 bootstrap-responsive 样式表中瞎搞，这样默认值仍将适用于文档中的其他元素。550px 处下降：
http://jsfiddle.net/wU8MW/
注意：由于修改后的新 CSS 应该先加载，因此我将上述修改后的 @media 查询放置在 css 框架的下方。@media (max-width: 979px)查询以创建新的@media (max-width: 550px)查询。然后（2）您手动编写了一个新的979px查询来覆盖主要的bootstrap-responsive.css中的979px查询的效果？您CSS中的标签顺序似乎不遵循bootstrap-responsive.css中的顺序，因此我很难进行比较以查看您所做的事情。 - Mark Berry@media (max-width: 550px)查询语句并没有遵循最初的@media (max-width: 979px)查询语句的语法，因为我只是通过firebug手动覆盖了一个快速示例，并复制/粘贴了它，有点懒惰，但你在第二点提到的方法才是正确的做法。 - Andres Ilich在下一个版本（2.2.1.0）中，bootstrap-sass将支持变量$navbarCollapseWidth。一旦该版本发布，您就可以更新它以实现所需的功能！
@import "bootstrap";。 - Ashley截至2013年8月，可以在http://getbootstrap.com/customize/找到Bootstrap 3的“自定义和下载”页面。
使用Bootstrap 3，相关变量是@grid-float-breakpoint。
以下Stack Overflow页面有更多细节：Bootstrap 3 Navbar Collapse
我猜测（也希望）这将很快以官方方式实现。与此同时，我只是使用 visible-phone 在下拉按钮上进行简单的 css hack，并在导航栏中放置了第二组按钮，使用 visible-tablet。所以之前它看起来像这样：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="visible-tablet">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
我创建了一个单独的SCSS文件，列出了Bootstrap需要的所有局部文件，这样我就可以根据我们网站的需求打开或关闭局部文件。这样，我可以轻松地覆盖断点变量。以下是我的代码：
// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
这是我的代码（所有其他解决方案在导航栏下拉时都显示了奇怪的滚动条，所以我编辑了代码，使其没有滚动条）。我无法在其他答案上发布，因此我将在这里发布，以供其他人查找。我正在使用Rails和Bootstrap 3.0进行操作。
在assets/stylesheets/framework和overrides中粘贴以下内容（根据需要调整最大宽度值）：
@media (max-width: 2500px) {
.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-collapse.collapse.in {
display: block!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
Bootstrap 3.x
使用SASS，您可以更改$screen-sm的值以针对您的最小尺寸
例如：$screen-sm: 600px;
您需要在@import "bootstrap";之前将此值放入您的application.scss文件中
$screen-sm:600px;
@import "bootstrap";
Less变量以“@”开头，只需将它们更改为“$”以在导入之前覆盖它们。
使用LESS，您可以更改@screen-small的值以针对最小尺寸
例如：@screen-small: 600px;
我使用这个来仅在宽度小于600px时切换到“小型设备”模式