最简单的方法是使用自举布局,汉堡菜单始终可见

Question

我见过许多人问相反,即使在小屏幕尺寸下也不会出现汉堡菜单,但我找不到如何轻松地始终启用汉堡菜单.

通常会出现:

这假设是一个标准的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", "Index", "Home", new { area = "" }, null)</li>
            </ul>
        </div>
    </div>
</div>

更新:

显然.Less,使用ASP.Net MVC时使用的解决方案是完全可以接受的,因此您不必限制原始CSS的答案.最近的发展意味着通过NuGet将Bootstrap.less添加到项目中变得微不足道.实际上,大多数简单的CSS答案都会受到来自原始源再现最小css的任何解决方案的可维护性的影响.

Answer 1

您可以使用此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在最初询问问题时提到的那样,@grid-float-breakpoint如果正在使用LESS源,则可以将其设置为较大的值.

使用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