最简单的方法有一个引导的布局，其中汉堡菜单始终可见 [英] Easiest way to have a bootstrap layout where the burger menu is always visible

问题描述

我见过很多人问对面，使汉堡菜单中的不会出现的，即使是在小的屏幕尺寸，但我找不到如何轻松的总是有汉堡启用菜单的

由于通常出现的：

这是假设一个标准的引导3的配置，由一个Visual Studio 2013 Web应用程序项目作为生成的，所以你不应该需要标准的Visual Studio MVC HTML或CSS引导

当我将preFER它出现：

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

 ＆LT; D​​IV CLASS =导航栏导航栏，导航栏逆固定顶＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
        ＆LT; D​​IV CLASS =导航栏头＆GT;
            ＆LT;按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=＆GTNavbar的崩溃。
                ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
                ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
                ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
            ＆LT; /按钮＆GT;
            @ Html.ActionLink（项目名在这里，索引，家，空，新的{@class =导航栏牌隐藏-XS}）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =Navbar的垮垮＆GT;
            ＆LT; UL类=NAV导航栏，导航＆GT;
                ＆LT;立GT; @ Html.ActionLink（家，索引，家，新{面积=}，NULL）LT; /李＆GT;
            ＆LT; / UL＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

如果您不想少用或自定义引导身材，你可以用这个CSS来覆盖引导的默认导航栏行为..

  .navbar头{
  飘：无;
}
.navbar拨动{
  显示：块;
}
.navbar崩溃{
  边境顶：1px的透明固体;
  的box-shadow：0插入0 1px的RGBA（255,255,255,0.1）;
}
.navbar-collapse.collapse {
  ！显示：无重要;
}
.navbar-NAV {
  飘：无重要;
  保证金：7.5px -15px;
}
.navbar-NAV＆GT;李{
  飘：无;
}
.navbar-NAV＆GT;李＆gt;将{
  填充顶：10px的;
  填充底：10px的;
}
 

演示： http://bootply.com/jXxt4Dc54A

I have seen many people ask the opposite, to make the burger menu never appear, even in the small screen sizes, but I can't find how to easily always have the burger menu enabled.

As it normally appears:

This is assuming a standard Bootstrap 3 configuration, as generated by a Visual Studio 2013 Web Application project, so you should not need the standard Visual Studio MVC HTML or the Bootstrap CSS.

As I would prefer it to appear:

From generated master page from a VS 2013 Web Application Project

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

解决方案

If you don't want to use LESS or a custom Bootstrap build, you can use this CSS to override Bootstrap's default navbar behavior..

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse {
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
  margin: 7.5px -15px;
}
.navbar-nav>li {
  float: none;
}
.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}

Demo: http://bootply.com/jXxt4Dc54A

这篇关于最简单的方法有一个引导的布局，其中汉堡菜单始终可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！