如何使用Twitter引导程序响应更改导航栏崩溃阈值？

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

我有一个类似于示例的导航栏的stream体布局。 这里遵循navbar的“响应变化”说明。 它工作正常：如果页面比940px更窄，导航栏会崩溃并显示一个“button”，我可以点击进行展开。

然而，我的导航栏看起来不错，大约550px宽，也就是说，除非屏幕很窄，否则不需要折叠。

如果屏幕宽度小于550像素，我如何告诉Bootstrap只收起导航栏？

请注意，在这一点上，我不想修改其他响应行为，例如叠加元素，而不是并排显示它们。

Answer 1

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

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

max-width值触发响应导航。 将其改为550px左右，它应该调整好。

Answer 2

Bootstrap> 2.1 && <3

• 使用较less的引导版本
• 更改variables.less中的@navbarCollapseWidthvariables
• 重新编译。

更新2013年：简单的方法

• 访问http://getbootstrap.com/customize/#less-variables
• 在formfield中更改@navbarCollapseWidth
• 点击“编译和下载”。

（THX通过评论Archonic）

更新2014年：引导3.1.1和3.2 （他们甚至将其添加到文档 ）

如果您正在自定义或覆盖/编辑.lessvariables，您正在寻找：

 //** 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 3

您可以build立一个新的@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先加载。

Answer 4

bootstrap-sass将在下一个版本（2.2.1.0）中支持variables$ navbarCollapseWidth。 一旦这个版本生效，你就可以更新它来做你想要的东西！

Answer 5

截至2013年8月，Bootstrap 3“自定义和下载”页面可以在http://getbootstrap.com/customize/find

使用Bootstrap 3，相关的variables是@ grid-float-breakpoint。

以下“堆栈溢出”页面包含其他详细信息： 引导程序3导航栏折叠

Answer 6

我怀疑（而且希望）这将很快以官方的方式实施。 与此同时，我只是做一个简单的CSS黑客攻击，使用下拉button上的可视电话和我放置在导航栏中的第二组button上的可见平板电脑。 所以在它看起来像这样：

 <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> 

注意元素的顺序很重要，否则你可能会遇到元素进入下一行的问题

Answer 7

我创build了一个单独的SCSS文件，列出了引导程序需要的所有部分，这样我可以根据我们的网站需要打开和closures部分。 这样，我可以轻松地覆盖断点variables。 这是我得到的：

 // 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"; 

Answer 8

这是我的代码（所有其他的解决scheme显示滚动条作为导航栏下降，所以我编辑代码，所以没有）。 我无法发布其他答案，所以我会在这里为别人find。 我正在使用rails来使用Bootstrap 3.0来执行此操作。

资产/样式表/框架和覆盖粘贴：（调整最大宽度为任何值来实现您的目标。）

 @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; } 

Answer 9

Bootstrap 3.x

使用LESS ，你可以改变@screen-small的值来定位你的最小尺寸

例如： @screen-small: 600px;

一旦宽度小于600像素，我使用它只切换到“微型设备”模式

Answer 10

Bootstrap 3.x

使用SASS，你可以改变$ screen-sm的值来定位你的最小尺寸

例如：$ screen-sm：600px;

你需要把这个值放在@import“bootstrap”之前的application.scss文件中;

 $screen-sm:600px; @import "bootstrap"; 

较less的variables以“@”开始，只是将其更改为“$”以在导入之前覆盖它们。

这里是variables列表。

Answer 11

这是一个很好的例子，你可以使用LESS版本的Bootstrap CSS文件。 如何做到这一点如下。

更好的办法是把它作为Github上的一个pull request来提交，这样每个人都可以受益，而你的“自定义代码”有望成为Bootstrap的一部分。

• 将variables添加到variables.less ，指定何时折叠导航栏。 就像： @navCollapseWidth: 979px
• 然后修改responsive-navbar.less …
  • 将@media (max-width: 979px)到@media (max-width: @navCollapseWidth)
  • 在底部将@media (min-width: 980px)更改为@media (max-width: @navCollapseWidth - 1)

当然，你必须使用build议的方法之一来编译LESS。

Answer 12

通过在主折叠式导航栏中添加一个可见电话分类块和一个隐藏式电话分类来进一步完善泰勒的黑客行为，即使在手机导航栏中也可以“拉出”一个或两个折叠的项目。

 <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> 

Answer 13

只需在自定义的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; } }