Question

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

这就是我对侧栏（位于'row'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”类添加到侧栏列，但它不起作用。

Answer 1

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

您可以将导航链接与navbar-left / navbar-right分开，然后使用navbar-left作为侧边栏，宽度超过768px。然后，所有链接将在767px下的移动导航内合并。

注意：此设置适用于全宽布局（使用容器 - 流体类），如果您使用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>

Answer 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'尺寸，这就是隐藏链接，这是汉堡包菜单出现的尺寸。

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

添加侧栏链接到Bootstrap“hamburger”菜单

2 个答案: