Bootstrap 汉堡导航菜单（全屏）答案

【问题标题】：Bootstrap burger nav menu (full screen)Bootstrap 汉堡导航菜单（全屏）
【发布时间】：2015-09-01 11:49:50
【问题描述】：

这是boot ply上的一些代码：

我想要做的是，不是在调整窗口大小时出现汉堡菜单，我想要一个全屏版本的菜单，它具有相同的效果，但适用于非移动屏幕。似乎汉堡菜单只在移动设备上被激活。我怎样才能做到这一点？谢谢

【问题讨论】：

您想在桌面上使用全屏菜单，在移动设备上使用汉堡菜单吗？
你已经尝试过什么？请在问题中也包含您的代码。
vivekkupadhyay - 是的
可能重复：stackoverflow.com/questions/21860263/…

【解决方案1】：

您必须使用媒体查询并更改默认值以在更大的视口中公开navbar-toggle 类。将媒体查询宽度更改为您需要的任何值。

.navbar.custom-navbar .fa {
  font-size: 25px
}
@media (max-width: 2500px) {
  .custom-navbar .navbar-header {
    float: none;
  }
  .custom-navbar .navbar-left,
  .custom-navbar .navbar-right {
    float: none !important;
  }
  .custom-navbar .navbar-toggle {
    display: block;
  }
  .custom-navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .custom-navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .custom-navbar .navbar-collapse.collapse {
    display: none!important;
  }
  .custom-navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .custom-navbar .navbar-nav>li {
    float: none;
  }
  .custom-navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .custom-navbar .collapse.in {
    display: block !important;
  }
  .custom-navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
    <div class="navbar-header"> <a class="navbar-brand" rel="home" href="#" title="Help">
        Brand
      </a>

    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse-1">
      <!-- Non-collapsing right-side icons -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li>
          <a href="#" class="fa fa-cog"></a>

        </li>
        <li>
          <a href="#" class="fa fa-home"></a>

        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container -->
</nav>

【讨论】：

谢谢，这似乎有两个问题。当我按下菜单项按钮时，菜单不会自动折叠，而是保持打开状态。另外，我可以在汉堡菜单的左侧添加其他按钮吗？
在示例中，我提供的菜单折叠问题不会发生，如果需要，您可以创建另一个 div 以在折叠的导航栏之外公开链接。