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

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>

更新

显然，在使用ASP.Net MVC时，使用.Less的解决方案是完全可以接受的，因此您不必限制原始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

<强>更新

此问题最近已更改并标记为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