我看到很多人问相反,即使在小屏幕尺寸下也不会出现汉堡菜单,但我找不到如何轻松地始终启用汉堡菜单.
@H_301_17@解决方法
通常会出现:
这假设是一个标准的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="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",new { area = "" },null)</li> </ul> </div> </div> </div>
更新:
显然,使用.Less的解决方案在使用ASP.Net MVC时是完全可以接受的,因此您不必限制原始CSS的答案.最近的发展意味着通过NuGet将Bootstrap.less添加到项目中变得微不足道.实际上,大多数简单的CSS答案都会因为从原始源再现最小css的任何解决方案而难以维护.
您可以使用此CSS来覆盖Bootstrap的默认导航栏行为.
.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,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