最简单的方法有一个引导布局，汉堡菜单总是可见 [英] Easiest way to have a bootstrap layout where the burger menu is always visible
问题描述
我已经看到很多人反对，让汉堡菜单永远不会出现，即使在小屏幕尺寸，但我找不到如何轻松地总是有汉堡
。 /i.stack.imgur.com/icL0r.pngalt =enter image description here>这是假设一个标准的Bootstrap 3配置，由Visual Studio 2013 Web应用程序项目，因此您不应该需要标准的Visual Studio MVC HTML或Bootstrap CSS。
我希望它出现：
>
从VS 2013 Web应用程序生成的母版页
< div class =navbar navbar- inverse navbar-fixed-top>
< div class =container>
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-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>
更新：
.Less 在使用ASP.Net MVC时是完全可以接受的，所以你不必限制原始CSS的答案。最近的发展意味着添加Bootstrap.less到一个项目现在通过NuGet微不足道。事实上，大多数简单的CSS答案将受到不太可维护的任何解决方案，从最初的源重现最小的css。
您可以使用此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;
}
使用CSS： http://bootply.com/jXxt4Dc54A
UPDATE
此问题最近更改并标记为LESS。正如@cvrebert在最初提出问题时提到的那样，如果使用LESS源，则 @ grid-float-breakpoint 可以设置为一个较大的值。
使用LESS： http://www.codeply.com/go / UNFhTH5Hm3
Bootstrap 4的UPDATE
对于Bootstrap 4 （目前为alpha），添加了新的 navbar-toggleable - * 类来控制导航栏折叠断点。现在navbar总是折叠，除非明确使用 navbar-toggleable - * 类之一。因此，不需要CSS （或SASS变量）更改就可以让汉堡包始终显示。
; nav class =navbar navbar-light bg-faded navbar-fixed-top>
< button class =navbar-toggler pull-righttype =buttondata-toggle =collapsedata-target =＃collapsingNavbar1>
☰
< / button>
< a class =navbar-brandhref =＃> Navbar< / a>
< div class =collapseid =collapsingNavbar1>
< ul class =nav navbar-nav>
< li class =nav-item>
< a class =nav-linkhref =＃>链接< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>链接< / a>
< / li>
< / ul>
< / div>
< / nav>
Bootstrap 4 alpha： http://www.codeply.com/go/9WCE8jYmW8
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.
As I would prefer it to appear:
From generated master page from a VS 2013 Web Application Project
<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 .Less is 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.
You can use this CSS to override Bootstrap's default navbar behavior..
.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
UPDATE
This question was recently changed and tagged with LESS. As @cvrebert mentioned when the question was originally asked, the @grid-float-breakpoint can be set to a large value if the LESS source is being used.
Using LESS: http://www.codeply.com/go/UNFhTH5Hm3
UPDATE for Bootstrap 4
For Bootstrap 4 (currently in alpha), the new navbar-toggleable-* classes have been added to control the navbar collapse breakpoint. Now the navbar is always collapsed, unless one of the navbar-toggleable-* classes is explicitly used. Therefore no CSS (or SASS variable) changes are necessary to have the hamburger always show.
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<button class="navbar-toggler pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar1">
☰
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="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 alpha: http://www.codeply.com/go/9WCE8jYmW8
这篇关于最简单的方法有一个引导布局，汉堡菜单总是可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
