Question

我现在已经搜索了stackoverflow很长一段时间但仍无法找到答案。

导航栏是否有任何方法可以使用bootstrap折叠到一边？我的意思是你通常有水平导航条然后缩小时，它从侧面出来而不是在点击按钮时从上到下掉落。那有意义吗？对不起，我正在屠杀，但这有点难以解释。

感谢您的帮助。

Answer 1

如果没有别的话，这可能会给你一个基础。

这使用它自己的数据属性来替换默认的data-toggle="collapse"，其余的只是在视口低于768px时将导航转换为侧边栏。导航链接包含在<div class="navbar-default side-collapse open">中，它为侧边栏添加了所需的CSS，并替换了通常与默认类一起出现的元素。

将此示例与Docs中的默认值进行比较，以查看更改。

请参阅工作示例代码段

＆＃13;

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

＆＃13;

@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;
  }
}

＆＃13;

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

＆＃13;

折叠自举边条

1 个答案: