CSS Bootstrap：如何更早地折叠导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21076922/
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: How to collapse navbar earlier
提问by Edward
I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)
我想以比 768 像素更早的分辨率折叠我的导航栏，例如 992 像素，我该怎么做？谢谢！（我知道我可以在 bootstrap 页面上自定义它，但我不想用新的 bootstrap.css 文件重新开始我的项目）
回答by Gerfried
If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:
如果您不想通过使用 Less/Sass 来操作 Bootstrap（可能是因为您想通过 CDN 加载它），这就是对我有用的技巧：
@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;
}
}
Demo: https://jsfiddle.net/0pmy8usr/
演示：https: //jsfiddle.net/0pmy8usr/
Add this in a separate CSS file and include it after bootstrap.css
将此添加到单独的 CSS 文件中，并将其包含在 bootstrap.css 之后
UPDATE for Bootstrap 4:
Bootstrap 4 的更新：
@media(max-width:900px) {
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar-toggler {display: block !important;}
.navbar-toggleable-sm.collapse {display:none !important}
.navbar-toggleable-sm.collapse.in {display:block !important}
}
回答by barduro
In variables.less, change
在variables.less，改变
@grid-float-breakpoint: @screen-sm-min
to
到
@grid-float-breakpoint: @screen-md-min;
回答by Ahmed Na.
If you need to collapse your navbar in earlier resolution than 768px so you will need to use @media min-widthand max-width, and you don't need to start new project for doing that simply create new .cssfile ( example: custom.css) and inset it under your main bootstrap.cssto override its values. and write this code inside it :
如果您需要以早于 768px 的分辨率折叠导航栏，那么您将需要使用 @mediamin-width和max-width，并且您不需要为此启动新项目，只需创建新的.css文件（例如： custom.css）并插入它在您的主 bootstrap.css下覆盖其值。并在其中编写此代码：
CODE:
代码：
@media (min-width: 992px) {
.collapse {
display: none !important;
}
}
Also, you can have a look at this post: change bootstrap navbar collapse.
另外，你可以看看这篇文章：更改引导导航栏折叠。
I hope this will give you the solution.
我希望这会给你解决方案。
回答by jacvalle
You can also override the bootstrap classes that close the gap. Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.
您还可以覆盖缩小差距的引导程序类。Bellow 是使用下拉菜单覆盖基本导航栏的工作代码。并非所有类都在下面被覆盖，因此根据您使用的内容，您可能需要覆盖其他类。
@media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.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;*/
margin: 7.5px 50px 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;
}
}
回答by Technology Garden
The solution is actually very simple. Use .navbar-expand-lg or .navbar-expand-xl class with <nav>tag.
解决方法其实很简单。使用 .navbar-expand-lg 或 .navbar-expand-xl 类和<nav>标签。
Example :-
例子 ：-
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>
Thank you all.
谢谢你们。
回答by Rahul Mahale
If you want it is menu to be collapsable from medium devices
如果您希望菜单可从中型设备折叠
You can directly do by
你可以直接通过
toggleable="md"
可切换=“md”
Else you can go for other force collapsable approach by setting sccs/ less of bootstrap.
否则，您可以通过设置 sccs/ less of bootstrap 来采用其他强制可折叠方法。
回答by Erik James Robles
I would suggest bringing in bootstrap into your project in lieu of a CDN and simply look for the media query that looks like this:
我建议将引导程序引入您的项目而不是 CDN，只需查找如下所示的媒体查询：
@media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; //...etc.
And change it to:
并将其更改为：
@media (min-width: 900px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; // ...etc.
Or if you are using a CDN, create an override to that specific media query.
或者，如果您使用的是 CDN，请创建对该特定媒体查询的覆盖。
