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

Posted 2023-03-06

【中文标题】拥有汉堡菜单始终可见的引导布局的最简单方法

【英文标题】：Easiest way to have a bootstrap layout where the burger menu is always visible

【发布时间】：2014-07-01 17:02:25

【问题描述】：

我看到很多人提出相反的问题，让汉堡菜单从不出现，即使在小屏幕尺寸下也是如此，但我找不到如何轻松地始终拥有汉堡菜单已启用。

正常情况下：

这是假设标准 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 答案的可维护性都较差。

【问题讨论】：

我不知道 bootstrap 有一个“标准 HTML”。

那么，您是如何制作“汉堡菜单”的？我不想滚动浏览整个引导文档来找到它。此外，并非所有人都安装了 Visual Studio 2013。你能给我们（至少）HTML吗？

@Rocket Hazmat：最好留给那些知道 VS 的人 :) 我会为那些不知道的人添加 sn-p。

见github.com/twbs/bootstrap/blob/… ？ TL;DR：将@grid-float-breakpoint 设置为一个巨大的值。

【参考方案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

【讨论】：

在第一个例子中，css的哪一部分实际上让导航栏崩溃了？

【参考方案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文件重新编译。