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

我见过很多人提出相反的要求，让汉堡菜单永远不会出现，即使是在小屏幕上，但我找不到如何轻松地始终启用汉堡菜单

正如通常所显示的那样：

这是假设由Visual Studio 2013 Web应用程序项目生成的标准Bootstrap 3配置，因此您不需要标准Visual Studio MVC HTML或Bootstrap CSS

正如我所希望的那样：

从VS 2013 Web应用程序项目生成的母版页

@ActionLink（“ProjectName Here”，“Index”，“Home”，null，new{@class=“navbar brand hidden xs”}）

@ActionLink（“Home”，“Index”，“Home”，new{area=”“}，null）

更新：

---

显然，当使用ASP.NETMVC时，使用

.Less

的解决方案是完全可以接受的，因此您不必将答案限制为原始CSS。最近的发展意味着通过NuGet向项目中添加Bootstrap.less现在变得微不足道。事实上，大多数简单的CSS答案的可维护性比从原始源代码复制最小CSS的任何解决方案都要差。

您可以使用此CSS覆盖引导的默认

导航栏行为

.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：

更新

这个问题最近被修改了，并加上了较少的标签。正如最初提出问题时@cvrebert所述，如果使用较少的源，则可以将
@grid float断点设置为较大的值

使用更少：

引导程序4的更新

对于引导程序4，添加了新的
导航栏扩展-*
类来控制导航栏折叠断点。现在，除非显式使用了
navbar expand-*
类之一，否则navbar总是折叠的。因此，无需更改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:
我发现@Skelly的解决方案导致菜单在打开后立即折叠起来。（至少对于非固定版本的导航）。所以我又写了一些CSS：

（根据需要删除或更改媒体查询）

如果你不想修改更少的文件并重新编译。
我不知道bootstrap有一个“标准HTML”。那么，你是如何制作“汉堡菜单”的呢？我不想滚动整个引导文档来找到它。此外，并非所有人都安装了Visual Studio 2013。你能给我们（至少）HTML吗？@Rocket Hazmat:最好让那些知道VS:）我会为那些不知道的人添加代码片段。看到了吗？TL；DR：将
@grid float breakpoint
设置为一个很大的值。在第一个示例中，css的哪一部分实际使导航栏折叠？
<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>

@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;    
    }
}