将侧边栏链接添加到 Bootstrap“汉堡”菜单答案

【问题标题】：Add sidebar links to Bootstrap "hamburger" menu将侧边栏链接添加到 Bootstrap“汉堡”菜单
【发布时间】：2016-05-15 23:17:54
【问题描述】：

我有一个用 Bootstrap 制作的页面，它有一个顶部导航栏和一个侧边栏。目前，当您将页面缩小到更小的尺寸（或在手机/平板电脑上查看）时，侧边栏会消失，顶部栏的链接会进入“汉堡”菜单（仅在较小的屏幕尺寸下显示的下拉菜单）。我希望侧边栏的链接也可以添加到汉堡菜单中，但不要在屏幕很大时显示在顶部栏上。

目前这是我对顶部栏的内容：

<nav class="navbar navbar-inverse navbar-fixed-top">
(some other stuff)
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="logout-link"><a href="logout url">Logout</a></li>
      </ul>
    </div>
</nav>

这是我的侧边栏（位于“行”div内）：

    <div class="col-sm-2 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="fizz">Fizz</a></li>
        <li><a href="buzz">Buzz</a></li>
        <li><a href="blah">Blah</a></li>
      </ul>
    </div>

当您向下调整页面大小时，右上角出现的下拉菜单如下所示：

logout

我希望它看起来像这样：

Fizz
Buzz
Blah
======
logout

...没有在全尺寸屏幕的顶部栏中添加“Fizz Buzz Blah”。我怎样才能做到这一点？我尝试将“dropdown”和“nav-navbar”类添加到侧边栏列，但没有成功。

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

也许这会对你有所帮助或给你一些想法。

您可以通过使用navbar-left / navbar-right 分隔导航链接来做到这一点，然后使用navbar-left 作为宽度超过768 像素的侧边栏。然后，您的所有链接将合并到 767 像素以下的移动导航中。

注意：此设置适用于全角布局（使用 container-fluid 类），如果您使用 container 类，则必须对这些宽度进行调整。

在 FullPage 上查看工作示例片段。

body {
  padding-top: 50px;
}
@media screen and (min-width: 768px) {
  .sidebar-nav .navbar-nav.navbar-left {
    top: 50px;
    bottom: 0;
    left: 0;
    width: 150px;
    position: fixed;
    background: #222;
  }
  .sidebar-nav .navbar-nav.navbar-left > li {
    display: block;
    float: none;
  }
  .main-content {
    margin-left: 150px;
  }
}
/***FOR DEMO ONLY***/

.main-content .thumbnail {
  border: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20);
  padding: 25px;
  max-width: 500px;
  margin: 12.5px auto;
}
/***FOR DEMO ONLY***/

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav">
    <div class="container-fluid">
      <div class="navbar-header">
        <button data-toggle="collapse" data-target="#bs-nav" type="button" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>
        </button> <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="navbar-collapse collapse" id="bs-nav">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#">Fizz</a>
          </li>
          <li><a href="#">Buzz</a>
          </li>
          <li><a href="#">Blah</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="main-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢，这正是我正在寻找的东西。

【解决方案2】：

我找到了一个替代解决方案，可能不如 vanburen 发布的解决方案那么优雅，但我想分享它，以防其他人遇到有用的情况。

我将“隐藏”列表项添加到具有注销链接的列表中：

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="fizz">Fizz</a></li>
        <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="buzz">Buzz</a></li>
        <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="blah">Blah</a></li>
        <li class="logout-link"><a href="logout">Logout</a></li>
      </ul>
    </div>

如果屏幕不是 'xs' 大小（即出现汉堡菜单的大小），这会隐藏链接。

如果您希望将不一定在其他导航栏中找到的项目添加到汉堡菜单中，这是一个很好的解决方案。

【讨论】：