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

我在一个使用 bootstrap-sass 实现的 Rails3.1.2项目中使用了 Bootstrap 2.0.1。我正在加载 bootstrap.css和 bootstrap-responsive.css文件，以及 bootstrap-collapse.js Javascript。

我有一个流动的布局与导航栏类似的 例子。这遵循导航栏的“响应变化”指示 给你。它工作得很好: 如果页面比940px 窄，导航栏就会折叠并显示一个“按钮”，我可以点击展开它。

然而，我的导航栏看起来很好，只有550像素宽，也就是说，除非屏幕非常窄，否则它不需要折叠。

如何告诉 Bootstrap 只折叠导航栏，如果屏幕是小于550px 的宽度？

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

113567 次浏览
小开
最佳答案

You are looking for line 239 of bootstrap-responsive.css

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

Where the max-width value triggers the responsive nav. Change it to 550px or so and it should resize fine.

小开

You can establish a new @media query to drop the navbar elements down as you see fit, all you have to do is reset the former to accommodate your new query with the desired drop width. Take this for example:

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


}

In the following code you can see how I included the original @media query that handles the drop before the 979px mark and the new query to support your desired drop point of 550px. I modified the original query straight from the bootstrap-responsive css to reset all the styles applied to that specific query for the navbar elements and ported them to the new query that carries the drop point you need instead. This way we can commute all the styles from the original query down to the new query without messing around in the bootstrap-responsive stylesheet, this way the default values will still apply to the other elements in your document.

Here is a short demo with a media query set to drop at 550px as you require: http://jsfiddle.net/wU8MW/

Note: I placed the above modified @media queries way down below the css frame as the new modified css is supposed to be loaded first than the responsive css.

小开

This is a great example of where you could be using the LESS version of the Bootstrap CSS files. How to do this is below.

Even better would be to submit this as a pull request on Github so that everyone can benefit and your "custom code" would hopefully be part of Bootstrap moving forward.

  • Add a variable to variables.less that specifies when to collapse the navbar. Something like: @navCollapseWidth: 979px
  • Then modify responsive-navbar.less...
    • Up top change @media (max-width: 979px) to @media (max-width: @navCollapseWidth)
    • At the bottom change @media (min-width: 980px) to @media (max-width: @navCollapseWidth - 1)

Of course... you'd have to compile LESS using one of the suggested methods.

小开

I suspect (and hope) this will be implemented in an official way soon. In the meantime I'm just doing a simple css hack, using visible-phone on the dropdown button and visible-tablet on a second set of buttons I've placed in the navbar. So before it looked like this:

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

And now it looks like:

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

Note that order of elements is important, otherwise you may have issues with elements going into the next line

小开

Taking tyler's hack even further by adding a visible-phone classed block and a hidden-phone class to an item in the main collapsible navigation, you can 'pull out' one or two of the collapsed items to display even in the phone navbar.

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

Bootstrap > 2.1 && < 3

  • Use the less version of bootstrap
  • Change the @navbarCollapseWidth variable in variables.less
  • Recompile.

Update 2013: The easy way

(THX to Archonic via comment)

Update 2014: Bootstrap 3.1.1 and 3.2 (they even added it to the documentation)

If you're customizing or overriding/editing .less variables, you're looking for:

//** 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);
小开

bootstrap-sass will support the variable $navbarCollapseWidth in the next version (2.2.1.0). You'll be able to update it to do exactly what you want once that version is live!

小开

Bootstrap 3.x

using LESS, you can change the value of @screen-small to target your min size

example: @screen-small: 600px;

i use this to only switch to "tiny device" mode once the width is less than 600px

小开

As of August 2013, a Bootstrap 3 "Customize and download" page can be found at http://getbootstrap.com/customize/

With Bootstrap 3, the relevant variable is @grid-float-breakpoint.

The following Stack Overflow page has additional details: Bootstrap 3 Navbar Collapse

小开

I created a separate SCSS file that listed all of the partials that bootstrap needs, that way I can turn the partials on and off depending on what our site needs. This way, I am able to override the breakpoint variable easily. Here's what I got:

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

Bootstrap 3.x

using SASS, you can change the value of $screen-sm to target your min size

example: $screen-sm: 600px;

You need to put this value in your application.scss file before the @import "bootstrap"; 

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

Less variables begin with "@" just changed them to "$" to override them before the import.

Here is the list of variables.

小开

Here is my code (All other solution showed funky scrollbar as the navbar dropped down so I edited the code so it didn't). I could not post on other answer so I'll do it here for others to find. I am using rails to do this with Bootstrap 3.0.

assets/stylesheets/framework and overrides paste this: (Adjust max width to whatever value to achieve your goal.)

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

Just write down this this code in your custom style.css file and it will work 

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

Bootstrap 4.x

It is a snap to change collapse threshold in Bootstrap 4.x. There are 6 cases:

  1. Always expand, never collapse (i.e. breakpoint is 0px): <nav class="navbar navbar-expand">...</nav>
  2. Breakpoint is sm (576px): <nav class="navbar navbar-expand-sm">...</nav>
  3. Breakpoint is md (768px): <nav class="navbar navbar-expand-md">...</nav>
  4. Breakpoint is lg (992px): <nav class="navbar navbar-expand-lg">...</nav>
  5. Breakpoint is xl (1200px): <nav class="navbar navbar-expand-xl">.../nav>
  6. Always collapse, never expand (i.e. breakpoint is ∞px). : <nav class="navbar">...</nav> (Just remove the navbar-expand-* class. Mobile-first as in Bootstrap 4.x)

Credit to this article by Carol Skelly I found https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a


提交答案