我在Rails 3.1.2项目中使用Twitter Bootstrap 2.0.1，使用bootstrap-sass实现。我正在加载bootstrap.css和bootstrap-responsive.css文件，以及bootstrap-collapse.js Javascript。
我的流畅布局带有类似于example的导航栏。这遵循导航栏“响应变化”说明here。它工作正常：如果页面比940px更窄，导航栏会折叠并显示一个“按钮”，我可以点击它来展开。
然而，我的导航栏看起来很好，大约550px宽，即除非屏幕很窄，否则不需要折叠。
如果屏幕宽度小于550px，如何告诉Bootstrap仅折叠导航栏？
请注意，此时我不想要修改其他响应行为，例如堆叠元素而不是并排显示它们。
答案 0 :(得分：72)
更新2013：简单方法
（通过评论THX到Archonic）
更新2014：Bootstrap 3.1.1和3.2 （他们甚至added it to the documentation）
如果您是customizing或覆盖/编辑.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);
答案 1 :(得分：40)
您正在寻找bootstrap-responsive.css
@media (max-width: 979px) {...}
max-width值触发响应式导航的位置。将其更改为550px左右，它应该调整大小。
答案 2 :(得分：11)
您可以建立新的@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修改了原始查询，以重置应用于导航栏元素的特定查询的所有样式，并将它们移植到带有您需要的放置点的新查询。这样，我们可以将原始查询中的所有样式传递到新查询，而不会在引导响应样式表中乱七八糟，这样默认值仍将应用于文档中的其他元素。
以下是根据需要将媒体查询设置为550px的简短演示：
http://jsfiddle.net/wU8MW/
注意：我将上面修改过的@media查询放在css框架下面，因为新修改的css应该首先加载到响应式css。
答案 3 :(得分：6)
bootstrap-sass将在下一个版本（2.2.1.0）中支持变量$ navbarCollapseWidth。一旦该版本生效，您将能够更新它以完全按照您的要求进行操作！
答案 4 :(得分：5)
截至2013年8月，可在http://getbootstrap.com/customize/
找到Bootstrap 3“自定义和下载”页面使用Bootstrap 3，相关变量是@ grid-float-breakpoint。
以下Stack Overflow页面包含其他详细信息：Bootstrap 3 Navbar Collapse
答案 5 :(得分：4)
我怀疑（并希望）这将很快以官方方式实施。与此同时，我只是做一个简单的css hack，在下拉按钮上使用可见电话，在我放在导航栏中的第二组按钮上使用可见平板电脑。所以在它看起来像这样之前：
<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>
请注意，元素的顺序很重要，否则您可能会遇到元素进入下一行的问题
答案 6 :(得分：3)
我创建了一个单独的SCSS文件，列出了引导程序所需的所有部分，这样我就可以根据我们网站的需要打开和关闭部分内容。这样，我就可以轻松覆盖断点变量。这就是我得到的：
// 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";
答案 7 :(得分：2)
这是我的代码（所有其他解决方案显示时髦的滚动条，因为导航栏下拉，所以我编辑了代码，所以它没有＃）。我无法发布其他答案，所以我会在这里为其他人找到答案。我正在使用rails来使用Bootstrap 3.0执行此操作。
assets / stylesheets / framework和覆盖粘贴:(将最大宽度调整为任何值以实现目标。）
@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;
}
答案 8 :(得分：1)
使用 LESS ，您可以更改@screen-small的值以定位您的最小尺寸
示例：@screen-small: 600px;
我使用此功能仅在宽度小于600px
时切换到“微型设备”模式答案 9 :(得分：0)
这是您可以使用LESS版本的Bootstrap CSS文件的一个很好的示例。如何做到这一点如下。
更好的方法是将此作为拉取请求提交给Github，以便每个人都能受益，并且您的“自定义代码”有望成为Bootstrap前进的一部分。
variables.less添加一个变量，指定何时折叠导航栏。类似于：@navCollapseWidth: 979px responsive-navbar.less ...
@media (max-width: 979px)改为@media (max-width: @navCollapseWidth) @media (min-width: 980px)更改为@media (max-width: @navCollapseWidth - 1) 当然......你必须使用suggested methods之一编译LESS。
答案 10 :(得分：0)
通过在主要可折叠导航中的项目中添加可见电话类别块和隐藏电话类来进一步加强tyler的攻击，您可以'拉出'即使在手机导航栏中也会显示一两个已折叠的项目。
<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="visible-phone">
<ul class="nav">
<li>Navigation 1</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="hidden-phone">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
答案 11 :(得分：0)
只需在自定义style.css文件中记下此代码即可 它会起作用
@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar-nav {
float: none !important;
margin: 0px;
}
.navbar-nav {
margin: 7.5px -15px;
}
.nav > li {
position: relative;
display: block;
}
.navbar-nav > li {
float: none !important;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
}
.nav {
padding-left: 0px;
margin-bottom: 0px;
list-style: outside none none;
}
}
答案 12 :(得分：0)
Bootstrap 4.x
在Bootstrap 4.x中更改崩溃阈值非常方便。有6种情况：
<nav class="navbar navbar-expand">...</nav> <nav class="navbar navbar-expand-sm">...</nav> <nav class="navbar navbar-expand-md">...</nav> <nav class="navbar navbar-expand-lg">...</nav> <nav class="navbar navbar-expand-xl">.../nav> <nav class="navbar">...</nav>（只需删除navbar-expand-*类。就像在Bootstrap 4.x中一样，移动优先）我发现https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a
是Carol Skelly对本文的感谢