twitter-bootstrap Bootstrap 3 导航栏折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18192082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Navbar Collapse
提问by timhc22
Is there any way to increase the point at which the bootstrap 3 navbar collapses (i.e. so that it collapses into a drop down on portrait tablets)?
有没有办法增加引导程序 3 导航栏折叠的点（即使其折叠成纵向平板电脑的下拉菜单）？
These two were applicable to bootstrap 2 but not now!
这两个适用于 bootstrap 2 但现在不适用！
How to change navbar collapse threshold using Twitter bootstrap-responsive?
如何使用 Twitter bootstrap-responsive 更改导航栏折叠阈值？
回答by Seb33300
I had the same problem today.
我今天遇到了同样的问题。
Bootstrap 4
引导程序 4
It's a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
这是一个本机功能：https: //getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
You have to use .navbar-expand{-sm|-md|-lg|-xl}classes:
你必须使用.navbar-expand{-sm|-md|-lg|-xl}类：
<nav class="navbar navbar-expand-md navbar-light bg-light">
Bootstrap 3
引导程序 3
@media (max-width: 991px) {
.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-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Just change 991pxby 1199pxfor mdsizes.
只要改变991px通过1199px的md尺寸。
回答by jmbertucci
The big difference between Bootstrap 2 and Bootstrap 3 is that Bootstrap 3 is "mobile first".
Bootstrap 2 和 Bootstrap 3 的最大区别在于 Bootstrap 3 是“移动优先”。
That means the default styles are designed for mobile devices and in the case of Navbars, that means it's "collapsed" by default and "expands" when it reaches a certain minimum size.
这意味着默认样式是为移动设备设计的，在导航栏的情况下，这意味着它在默认情况下“折叠”并在达到某个最小尺寸时“展开”。
Bootstrap 3's site actually has a "hint" as to what to do: http://getbootstrap.com/components/#navbar
Bootstrap 3 的网站实际上有一个关于如何做的“提示”：http: //getbootstrap.com/components/#navbar
Customize the collapsing point
Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
自定义折叠点
根据导航栏中的内容，您可能需要更改导航栏在折叠和水平模式之间切换的点。自定义@grid-float-breakpoint 变量或添加您自己的媒体查询。
If you're going to re-compile your LESS, you'll find the noted LESS variable in the variables.lessfile. It's currently set to "expand" @media (min-width: 768px)which is a "small screen" (ie. a tablet) by Bootstrap 3 terms.
如果您要重新编译 LESS，您将在variables.less文件中找到标注的 LESS 变量。它目前设置为“扩展” @media (min-width: 768px)，即 Bootstrap 3 术语中的“小屏幕”（即平板电脑）。
@grid-float-breakpoint: @screen-tablet;
@grid-float-breakpoint: @screen-tablet;
If you want to keep the collapsed a little longer you can adjust it like such:
如果你想保持折叠的时间更长一点，你可以像这样调整它：
@grid-float-breakpoint: @screen-desktop;(992px break-point)
@grid-float-breakpoint: @screen-desktop;（992px 断点）
or expand sooner
或早点扩张
@grid-float-breakpoint: @screen-phone(480px break-point)
@grid-float-breakpoint: @screen-phone（480px 断点）
If you want to have it expand later, and not deal with re-compiling the LESS, you'll have to overwrite the styles that get applied at the 768pxmedia query and have them return to the previous value. Then re-add them at the appropriate time.
如果您想稍后扩展它，而不是重新编译 LESS，则必须覆盖在768px媒体查询中应用的样式，并使它们返回到以前的值。然后在适当的时候重新添加它们。
I'm not sure if there's a better way to do it. Recompiling the Bootstrap LESS to your needs is the best (easiest) way. Otherwise, you'll have to find all the CSS media queries that affect your Navbar, overwrite them to default styles @ the 768px width and then revert them back at a higher min-width.
我不确定是否有更好的方法来做到这一点。根据您的需要重新编译 Bootstrap LESS 是最好（最简单）的方法。否则，您必须找到所有影响导航栏的 CSS 媒体查询，将它们覆盖为默认样式 @ 768px 宽度，然后将它们恢复为更高的最小宽度。
Recompiling the LESS will do all that magic for you just by changing the variable. Which is pretty much the point of LESS/SASS pre-compilers. =)
重新编译 LESS 只需更改变量即可为您完成所有这些魔术。这几乎是 LESS/SASS 预编译器的重点。=)
(note, I did look them all up, it's about 100 lines of code, which is annoy enough for me to drop the idea and just re-compile Bootstrap for a given project and avoid messing something up by accident)
（注意，我确实把它们都查了一遍，大约有 100 行代码，这足以让我放弃这个想法，只是为给定的项目重新编译 Bootstrap 并避免意外搞砸一些东西）
I hope that helps!
我希望这有帮助！
Cheers!
干杯!
回答by mshahbazm
Easiest way is to customize bootstrap
find variable:
查找变量：
@grid-float-breakpoint
which is set to @screen-sm, you can change it according to your needs. Hope it helps!
设置为@screen-sm，您可以根据需要更改它。希望能帮助到你！
回答by Doug Lee
these are controlled in variables, no need to muck around in source. with bootstrap, try variables first, then overrides. then go back and try variables again ;)
这些是在变量中控制的，不需要在源代码中乱搞。使用引导程序，首先尝试变量，然后覆盖。然后返回并再次尝试变量;)
i used bootstrap-sass with rails, but it's the same with the default LESS.
我将 bootstrap-sass 与 rails 一起使用，但它与默认的 LESS 相同。
FILE: main.css.scss
-------------------
// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;
// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;
// then import your bootstrap
@import "bootstrap";
that's it! this variables reference page is super handy: https://github.com/twbs/bootstrap/blob/master/less/variables.less
而已！这个变量参考页面非常方便：https: //github.com/twbs/bootstrap/blob/master/less/variables.less
回答by Daniel
Thanks to Seb33300 I got this working. However, an important part seems to be missing. At least in Bootstrap version 3.1.1.
感谢 Seb33300 我得到了这个工作。然而，似乎缺少一个重要的部分。至少在 Bootstrap 版本 3.1.1 中。
My problem was that the navbar collapsed accordingly at the correct width, but the menu button didn't work. I couldn't expand and collapse the menu.
我的问题是导航栏以正确的宽度折叠，但菜单按钮不起作用。我无法展开和折叠菜单。
This is because the collapse.in class is overrided by the !important in .navbar-collapse.collapse, and can be solved by also adding the "collapse.in". Seb33300's example completed below:
这是因为collapse.in 类被.navbar-collapse.collapse 中的!important 覆盖，并且可以通过添加“collapse.in”来解决。Seb33300 的示例完成如下：
@media (max-width: 991px) {
.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;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
回答by Bastardo Sucio
I wanted to upvote and comment on jmbertucci's answer, but I'm not yet to be trusted with the controls. I had the same issue and resolved it as he said. If you are using Bootstrap 3.0, edit the LESS variables in variables.less The responsive break points are set around line 200:
我想对 jmbertucci 的回答进行投票和评论，但我还没有得到控件的信任。我遇到了同样的问题，并按照他的说法解决了。如果您使用的是 Bootstrap 3.0，请编辑 variables.less 中的 LESS 变量响应断点设置在第 200 行附近：
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
Then set the collapse value for the navbar using the @grid-float-breakpointvariable at about line 232. By default it's set to @screen-tablet . If you want you can use a pixel value, but I prefer to use the LESS variables.
然后在大约第 232 行使用@grid-float-breakpoint变量设置导航栏的折叠值。默认情况下它设置为 @screen-tablet。如果您愿意，可以使用像素值，但我更喜欢使用 LESS 变量。
回答by PepitoSolis
If the problem you face is the menu breaking into multiple lines, you can try one of the following:
如果您面临的问题是菜单分成多行，您可以尝试以下方法之一：
1) Try to reduce the number of menu items or their length, like removing menu items or shortening the words.
1) 尝试减少菜单项的数量或长度，例如删除菜单项或缩短单词。
2) Reducing the padding between the menu items, like this:
2）减少菜单项之间的填充，如下所示：
.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}
Default padding is 15px both sides (left and right).
默认填充为 15px 两侧（左右）。
If you prefer to change each individual side use:
如果您更喜欢更改每个单独的侧面，请使用：
padding-left: 7px;
padding-right: 8px;
This setting affects the dropdown list too.
此设置也会影响下拉列表。
This doesn't answer the question but it could help others who don't want to mess with the CSS or using LESS variables. The two common approaches to solve this problem.
这不能回答问题，但它可以帮助不想弄乱 CSS 或使用 LESS 变量的其他人。解决这个问题的两种常用方法。
回答by cdonner
I am concerned about maintenance and upgrade problems down the road from customizing Bootstrap. I can document the customization steps today and hope that the person upgrading Bootstrap three years from now will find the documentation and reapply the steps (that may or may not work at that point). An argument can be made either way, I suppose, but I prefer keeping any customizations in my code.
我担心自定义 Bootstrap 之后的维护和升级问题。我可以记录今天的自定义步骤，并希望从现在起三年后升级 Bootstrap 的人会找到文档并重新应用这些步骤（当时可能会也可能不会）。我想，无论哪种方式都可以提出论点，但我更喜欢在我的代码中保留任何自定义。
I don't quite understand how Seb33300's approach can work, though. It certainly did not work with Bootstrap 4.0.3. For the nav bar to expand at 1200 instead of 768, rules for both media queries must be overridden to prevent expanding at 768 and force expanding at 1200.
不过，我不太明白 Seb33300 的方法是如何工作的。它当然不适用于 Bootstrap 4.0.3。要使导航栏在 1200 而不是 768 处展开，必须覆盖两个媒体查询的规则以防止在 768 处展开并在 1200 处强制展开。
I have a longer menu that would wrap on the iPad in Portrait mode. The following keeps the menu collapsed until the 1200 breakpoint:
我有一个较长的菜单，可以在纵向模式下在 iPad 上环绕。以下保持菜单折叠直到 1200 断点：
@media (min-width: 768px) {
.navbar-header {
float: none; }
.navbar-toggle {
display: block; }
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 15px;
padding-left: 15px; }
.navbar-collapse.collapse {
display: none !important; }
.navbar-collapse.collapse.in {
display: block!important;
margin-top: 0px; }
}
@media (min-width: 1200px) {
.navbar-header {
float: left; }
.navbar-toggle {
display: none; }
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
display: block !important; }
}
回答by Bass Jobsen
The nabvar will collapse on small devices. The point of collapsing is defined by @grid-float-breakpoint in variables. By default this will by before 768px. For screens below the 768 pixels screen width, the navbar will look like:
nabvar 将在小型设备上崩溃。折叠点由变量中的@grid-float-breakpoint 定义。默认情况下，这将在 768px 之前。对于低于 768 像素屏幕宽度的屏幕，导航栏将如下所示：
It's possible to change the @grid-float-breakpoint in variables.less and recompile Bootstrap. When doing this you also will have to change @screen-xs-max in navbar.less. You will have to set this value to your new @grid-float-breakpoint -1. See also: https://github.com/twbs/bootstrap/pull/10465. This is needed to change navbar forms and dropdowns at the @grid-float-breakpoint to their mobile version too.
可以更改 variables.less 中的 @grid-float-breakpoint 并重新编译 Bootstrap。执行此操作时，您还必须在 navbar.less 中更改 @screen-xs-max。您必须将此值设置为新的@grid-float-breakpoint -1。另见：https: //github.com/twbs/bootstrap/pull/10465。这也是将@grid-float-breakpoint 处的导航栏表单和下拉菜单更改为移动版本所必需的。
回答by Markus
I did the CSS way with my install of Bootstrap 3.0.0, since I am not that familiar with LESS. Here is the code that I added to my custom css file (which I load after bootstrap.css) which allowed me to control so the menu was always working like an accordion.
Note:I wrapped my whole navbarinside a div with the class sidebarto separate out the behavior I wanted so it did not affect other navbars on my site, like the main menu. Adjust along your needs, hope it is of help.
我在安装 Bootstrap 3.0.0 时采用了 CSS 方式，因为我对 LESS 不太熟悉。这是我添加到我的自定义 css 文件（我在 bootstrap.css 之后加载）中的代码，它允许我进行控制，因此菜单始终像accordion.
注意：我将我的整个navbar内容用类包裹在一个 div 中，sidebar以分离出我想要的行为，这样它就不会影响我网站上的其他导航栏，如主菜单。根据您的需要进行调整，希望对您有所帮助。
/* Sidebar Menu Fix */
.sidebar .navbar-nav {
margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.sidebar .navbar-collapse {
max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.sidebar .navbar-nav {
float: none;
}
.sidebar .navbar-nav > li {
float: none;
}
Additional note: I also added a change to the toggle of the main menu navbar(since the code above on my site is used for a "submenu" on the side.
附加说明：我还对主菜单的切换进行了更改navbar（因为我网站上的上述代码用于侧面的“子菜单”。
I changed:
我变了：
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
into:
进入：
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">
And then also adjusted:
然后也调整了：
<div class="navbar-collapse collapse navbar-collapse">
into:
进入：
<div class="navbar-collapse collapse navbar-collapse-topmenu">
If you will only have one navbarI guess you will not need to worry about this, but it helped me in my case.
如果你只有一个，navbar我想你不需要担心这个，但在我的情况下它对我有帮助。
