CSS Bootstrap 导航栏在自定义宽度上折叠媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22329606/
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 navbar collapse media-query on custom width
提问by BurebistaRuler
Helo guys, I want to modify the navbar in order to collapse on @screen-md :992px;.
I have modified navbar.less, but still not working and I don't know what to do.
嘿伙计们，我想修改导航栏以便在@screen-md :992px;. 我已经修改了navbar.less，但仍然无法正常工作，我不知道该怎么办。
So how can I modify the @grid-float-breakpointvariable in order to have that menu collapsed on custom media query size?
那么如何修改@grid-float-breakpoint变量以便在自定义媒体查询大小上折叠该菜单？
回答by Zim
You can change the collapse point in 3.1 like this..
您可以像这样更改 3.1 中的折叠点。
@media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
In Bootstrap 4, changing the breakpoint is easier. See this answer
在Bootstrap 4 中，更改断点更容易。看到这个答案
回答by barduro
In variables.lesschange
在variables.less变化
@grid-float-breakpoint: @screen-sm-min
to
到
@grid-float-breakpoint: @screen-md-min;
or to whatever other width you would like.
或您想要的任何其他宽度。
It's easy and painless done this way.
这样做既简单又无痛。
回答by Jude
Here is the code I used to solve this, just add it to your style sheet.
这是我用来解决这个问题的代码，只需将其添加到您的样式表中即可。
@media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
回答by LOTUSMS
If you are using Twitter Bootstrap, the responsive collapse is already built in. You may just have to invoke it with a class in your menu. But this is the css I use in most of the Bootstrap applications I've worked with, including the one I working in right now
如果您使用 Twitter Bootstrap，响应式折叠已经内置。您可能只需要使用菜单中的类来调用它。但这是我在我使用过的大多数 Bootstrap 应用程序中使用的 css，包括我现在使用的那个
@media(min-width:768px) {
.navbar-collapse {
width: auto;
/* more code here */
}
change the min width to the width you want it to collapse from.
将最小宽度更改为您希望它折叠的宽度。
