CSS 拥有汉堡菜单始终可见的引导程序布局的最简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23641125/
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
Easiest way to have a bootstrap layout where the burger menu is always visible
提问by Gone Coding
I have seen many people ask the opposite, to make the burger menu never appear, even in the small screen sizes, but I can't find how to easily always have the burger menu enabled.
我见过很多人问相反的问题，即使在小屏幕尺寸下也不会出现汉堡菜单，但我找不到如何轻松地始终启用汉堡菜单。
As it normally appears:
正如它通常出现的那样：
This is assuming a standard Bootstrap 3 configuration, as generated by a Visual Studio 2013 Web Application project, so you should not need the standard Visual Studio MVC HTML or the Bootstrap CSS.
这是假设标准 Bootstrap 3 配置，由 Visual Studio 2013 Web 应用程序项目生成，因此您不需要标准 Visual Studio MVC HTML 或 Bootstrap CSS。
As I would prefer it to appear:
因为我希望它出现：
From generated master page from a VS 2013 Web Application Project
从 VS 2013 Web 应用程序项目生成的母版页
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("ProjectName Here", "Index", "Home", null, new { @class = "navbar-brand hidden-xs" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
Update:
更新：
Obviously a solution using .Lessis perfectly acceptable when using ASP.Net MVC, so you do not have to restrict answers to raw CSS. Recent developments mean adding Bootstrap.less to a project is now trivial via NuGet. In fact most plain CSS answers will suffer from being less maintainable that any solution that reproduces the minimal css from the original source.
显然.Less，使用 ASP.Net MVC 时使用的解决方案是完全可以接受的，因此您不必限制对原始 CSS 的回答。最近的发展意味着现在可以通过 NuGet 将 Bootstrap.less 添加到项目中。事实上，与任何从原始来源复制最小 css 的解决方案相比，大多数纯 CSS 答案的可维护性较差。
回答by Zim
You can use this CSS to override Bootstrap's default navbarbehavior..
您可以使用此 CSS 来覆盖 Bootstrap 的默认navbar行为..
.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;
}
Using CSS: http://bootply.com/jXxt4Dc54A
使用 CSS：http: //bootply.com/jXxt4Dc54A
UPDATE
更新
This question was recently changed and tagged with LESS. As @cvrebert mentioned when the question was originally asked, the @grid-float-breakpointcan be set to a large value if the LESS source is being used.
这个问题最近被更改并标记为 LESS。正如@cvrebert 在最初提出问题时提到的那样，@grid-float-breakpoint如果使用 LESS 源，则可以将其设置为较大的值。
Using LESS: http://www.codeply.com/go/UNFhTH5Hm3
使用 LESS：http: //www.codeply.com/go/UNFhTH5Hm3
UPDATE for Bootstrap 4
Bootstrap 4 的更新
For Bootstrap 4, the new navbar-expand-*classes have been added to control the navbar collapse breakpoint. Now the navbar is alwayscollapsed, unless one of the navbar-expand-*classes is explicitly used. Therefore no CSS(or SASS variable) changes are necessary to have the hamburger always show.
对于Bootstrap 4，navbar-expand-*添加了新类来控制导航栏折叠断点。现在导航栏总是折叠起来，除非navbar-expand-*明确使用其中一个类。因此，无需更改CSS（或 SASS 变量）即可始终显示汉堡包。
<nav class="navbar navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar1">
?
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar1">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Bootstrap 4: http://www.codeply.com/go/9WCE8jYmW8
引导程序 4：http: //www.codeply.com/go/9WCE8jYmW8
回答by richardstelmach
I found that @Skelly's solution resulted in the menu collapsing back up straight after opening. (at least with the non-fixed version of the nav). So I wrote some more CSS:
我发现@Skelly 的解决方案导致菜单在打开后立即折叠起来。（至少对于导航的非固定版本）。所以我写了更多的CSS：
(remove or change media query as desired)
（根据需要删除或更改媒体查询）
@media screen and (max-width: 991px){
.navbar-default{
background:none;
border:0;
position:absolute;
top:15px;
right:15px;
}
.navbar-collapse{
background:#f5f5f5;
}
.navbar-collapse.collapse{
display: none!important;
height: 0!important;
padding-bottom: 0;
overflow: hidden!important;
}
.navbar-toggle.collapsed{
display:block!important;
}
.navbar-toggle{
display:block!important;
}
.navbar-collapse.collapse.in{
display:block!important;
height:auto!important;
overflow:visible!important;
}
.navbar-nav>li,.navbar-header{
float:none;
}
.navbar-default .navbar-toggle.collapsed{
background:#fff;
}
}
If you don't want to modify the LESS file and re-compile.
如果不想修改LESS文件重新编译。
