添加侧边栏链接到Bootstrap“汉堡包”菜单

我有一个在Bootstrap中制作的页面，它有一个顶部导航栏和一个侧栏。目前，当您将页面调整为较小尺寸（或在移动设备/平板电脑上查看）时，边栏消失，顶部栏的链接进入“汉堡包”菜单（仅在较小屏幕尺寸下显示的下拉菜单）。我希望边栏的链接也添加到汉堡菜单中，但是当屏幕很大时，不会显示在顶栏上。添加侧边栏链接到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 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

而且我会喜欢e它看起来像这样：

Fizz 
Buzz 
Blah 
====== 
logout

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

来源

2016-02-05 Emily Cain

我找到了一个替补，也许比什么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”的大小，这是大小发生出现汉堡包菜单。

如果您希望将项目添加到汉堡菜单中，而这些项目不一定在不同的导航栏中找到，那么这是一个不错的解决方案。

来源

2016-02-08 20:57:53

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

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

注意：此设置是针对全宽布局（使用容器流体类），如果您使用的是container类，则必须对这些宽度进行调整。

查看完整页面上的工作示例代码段。

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>

来源

2016-02-05 22:47:37 vanburen

非常感谢，那就是我一直在寻找的东西。 –

没问题，不客气。 – vanburen

添加侧边栏链接到Bootstrap“汉堡包”菜单

回答

相关问题