折叠 Bootstrap 侧边栏

Question

我已经在StackOverflow上搜索了一段时间，但仍然找不到答案。

有没有办法使用Bootstrap使导航栏向侧边折叠？我的意思是，通常情况下，您会有一个水平导航栏，然后当它缩小时，它会从侧面弹出，而不是在单击按钮时从顶部到底部掉落。这有意义吗？对不起，我的表达不太好，但很难解释。

谢谢你的帮助。

- inertia

Answer 1

这可能会给你一个基础，如果没有别的话。这里使用自己的数据属性来替换默认的data-toggle="collapse"，并在视口小于768px时将导航转换为侧边栏。导航链接包含在

中，它添加了所需的CSS样式以创建侧边栏，并替换了通常会出现的默认类元素。与文档中的默认示例进行比较以查看更改。

See working example Snippet

$(document).ready(function() {
  $('[data-toggle=collapse-side]').click(function(e) {
    $('.side-collapse').toggleClass('open');
  });
});

@media screen and (max-width: 768px) {
  .navbar-side .side-collapse {
    top: 50px;
    bottom: 0;
    left: 0;
    width: 256px;
    position: fixed;
    overflow: auto;
    transition: all 0.3s cubic-bezier(.87, -.41, .19, 1.44);
  }
  .navbar-side .side-collapse.open {
    width: 0;
  }
}

<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/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-side navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button data-toggle="collapse-side" data-target=".side-collapse" type="button" class="navbar-toggle"><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-default side-collapse open">
      <div class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
          </li>
          <li><a href="#">Link</a> 
          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span>

              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</nav>
<div class="container">
  <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>

    </button> <strong>YUP!</strong>

  </div>
</div>

- vanburen