拥有汉堡菜单始终可见的引导布局的最简单方法

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>

引导程序 4：http://www.codeply.com/go/9WCE8jYmW8

Answer 2

我发现@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文件重新编译。