我见过许多人问相反,即使在小屏幕尺寸下也不会出现汉堡菜单,但我找不到如何轻松地始终启用汉堡菜单。
这假设是一个标准的Bootstrap 3配置,由Visual Studio 2013 Web应用程序项目生成,因此您不需要标准的Visual Studio MVC HTML或Bootstrap CSS。
<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>
显然,使用.Less
的解决方案在使用ASP.Net MVC时是完全可以接受的,因此您不必限制原始CSS的答案。最近的发展意味着通过NuGet将Bootstrap.less添加到项目中变得微不足道。实际上,大多数简单的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的更新
对于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
我发现@ Skelly的解决方案导致菜单在打开后直接折叠回来。 (至少使用导航的非固定版本)。所以我写了一些CSS:
(根据需要删除或更改媒体查询)
@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;
}
}
如果您不想修改LESS文件并重新编译。