Html Bootstrap 3 - 显示所有屏幕尺寸的折叠导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21860263/
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 - show collapsed navigation for all screen sizes
提问by Darren Wainwright
I am using Bootstrap v3.
我正在使用 Bootstrap v3。
I have the navbar classes in place so that when I have my screen mobile-size the navigation collapses and the little grid-like toggle button appears - so this is working as expected.
我有导航栏类，所以当我的屏幕移动大小时，导航会折叠并出现类似网格的小切换按钮 - 所以这按预期工作。
what i would like, is for this to be the default action for all screen sizes. That is, even on a desktop I would like the navigation to be collapsed and the toggle button to be visible.
我想要的是，这是所有屏幕尺寸的默认操作。也就是说，即使在桌面上，我也希望导航折叠并且切换按钮可见。
I've had a look through the css and there is a whole bunch of stuff that provides the functionality, though I don't know which parts to change.
我已经浏览了 css 并且有一大堆东西提供了功能，尽管我不知道要更改哪些部分。
I've tried commenting out the larger media-queries, though there are a lot of them and it seems to have a knock-on effect to other styling.
我尝试注释掉较大的媒体查询，尽管它们很多，而且似乎对其他样式有连锁反应。
any ideas?
有任何想法吗？
回答by Zim
You can use override the default Bootstrap CSS like this...
您可以像这样使用覆盖默认的 Bootstrap CSS...
.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;
}
Demo: http://www.bootply.com/114896
演示：http: //www.bootply.com/114896
This will ensure that the collapsed navbar is always used by overriding the Bootstrap @media queries.
这将通过覆盖 Bootstrap @media 查询来确保始终使用折叠的导航栏。
Update:For Bootstrap 4, you just need to remove the navbar-toggleableclass:
http://www.codeply.com/go/LN6szcJO53
更新：对于 Bootstrap 4，你只需要删除navbar-toggleable类：http:
//www.codeply.com/go/LN6szcJO53
回答by TheAllSeeingI
This is what worked for me.
这对我有用。
Visit : http://getbootstrap.com/customize/
访问：http: //getbootstrap.com/customize/
Locate : 'Less variables' --> 'Media queries breakpoints'
定位：'少变量'-->'媒体查询断点'
Change : @screen-lg value from 1200px to 1920px
更改：@screen-lg 值从 1200px 到 1920px
Locate : "Grid system" --> @grid-float-breakpoint
定位：“网格系统”--> @grid-float-breakpoint
Change : @screen-sm-min to @screen-lg
更改：@screen-sm-min 到 @screen-lg
Scroll to end of page.
滚动到页面末尾。
Click on "Compile and Download"
点击“编译并下载”
Extract and use these downloaded files.
提取并使用这些下载的文件。
回答by user5093523
This worked for me:
这对我有用：
.navbar-collapse.collapse {
display: none!important;
}
If suppose you find problems with toggle too, then put the following:
如果假设您也发现切换问题，请输入以下内容：
.navbar-collapse.collapse.in{
display: block!important;
}
回答by Sajidur Rahman
Wanted to save time but it wasn't perfect. I got some issues with latest bootstrap, there is some unnecessary code and has a overflowproblem in the drop-down menu. This code was the best solution for me:
想节省时间，但它并不完美。我在最新的引导程序中遇到了一些问题，有一些不必要的代码，并且overflow下拉菜单中有问题。这段代码对我来说是最好的解决方案：
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
回答by Raju Gurung
Adding 100% value on @grid-float-breakpoint(Grid system -> @grid-float-breakpoint-> 100%instead of @screen-sm-min).
在@grid-float-breakpoint（网格系统 -> @grid-float-breakpoint->100%而不是@screen-sm-min）上添加 100% 的值。
回答by wilcocammeraat
Easiest way i found is to change the variable.less file and change
我发现最简单的方法是更改 variable.less 文件并更改
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
to
到
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: ( your break point );
Only if you use LESS ofc.
仅当您使用 LESS ofc 时。
