Bootstrap 导航栏 - 水平推送答案

【问题标题】：Bootstrap Navbar - Horizontal PushBootstrap 导航栏 - 水平推送
【发布时间】：2015-08-30 22:30:55
【问题描述】：

我正在使用 Bootstrap 构建网站。在移动设备上，我有一个汉堡菜单。这显示为Navbar 的一部分。当我点击导航栏时，页面内容被下推，菜单出现在顶部。这是 Bootstrap 导航栏的默认行为。我想把内容推送到右边，让我的菜单占据设备的整个高度。

有没有办法用 Bootstrap 做到这一点？目前，我的代码如下所示：

<div class="collapse" id="nav1">
  <h4>Hello</h4>
  <ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

<nav class="navbar">
  <div class="col-xs-2">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1">
      &#9776;
    </button>
  </div>

  <div class="col-xs-8 center-block text-center">
    My App  
  </div>

  <div class="col-xs-2 text-right">
    <button>login</button>                
  </div>
</nav>

有没有办法让汉堡菜单出现在侧面而不是顶部？

【问题讨论】：

结帐 bigSlide：ascott1.github.io/bigSlide.js

标签： javascript css twitter-bootstrap

【解决方案1】：

您可以使用 jasny 引导程序 - 它非常好，您也可以将其集成到引导程序中，非常容易，无需触及核心文件：

http://www.jasny.net/bootstrap/javascript/#offcanvas

另外，bootstrap 已经有了一个 offcanvas 函数： http://getbootstrap.com/examples/offcanvas/

未经测试：

<div class="sidebar-offcanvas" id="nav1">
  <h4>Hello</h4>
  <ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

<nav class="navbar">
  <div class="col-xs-2">
    <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#nav1">
      &#9776;
    </button>
  </div>

  <div class="col-xs-8 center-block text-center">
    My App  
  </div>

  <div class="col-xs-2 text-right">
    <button>login</button>                
  </div>
</nav>

////编辑//// 工作小提琴：http://jsfiddle.net/chjdfqpg/2/

【讨论】：