Bootstrap v 3.2 组件显示（折叠水平面板）

Question

我想通过采用移动优先设计方法并使用 BS v 3.2 创建一个固定顶部导航栏。我也使用'less'作为预编译器。

因此，我构建了一个在 html 中看起来像这样的导航栏：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- And below is the dropdown menu toggle button which displays all elements visible in the non-collapsed version of the navbar-->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
...
</nav>

以上操作正常。

然而，我遇到困难的是，在移动视图中，当用户单击上面的切换按钮时，我希望发生两件事：

1) 切换按钮下的下拉菜单将不再出现（我已经很容易理解这部分了）。

2) 该下拉菜单中的内容将改为显示在一个面板中，该面板从左侧滑到设备显示屏上，将所有其他内容推到右侧。这对我来说是个棘手的部分。

我怀疑重新编码 Bootstrap 的 javascript 以实现所需的行为需要付出很大的努力，因此我很好奇在面板元素上使用 collapse.js 是否可能是一个合适的替代方案？我已经想出了如何使面板水平折叠而不是垂直折叠（下面的html）：

<div id="panel1" class="panel panel-default">
    <div id="collapseOne" class="panel-collapse collapse width">
        <div class="panel-body" style="width: 400px;">
        Content
        </div>
    </div>
</div>

我现在卡住的地方是菜单内容显示block；即首先它将所有其他内容向下推，然后在显示屏顶部滑入/取消折叠。我希望它能够将现有内容推离屏幕的右边缘。

是否可以实现内联显示？我知道 BS 对容器 - 行 - 列特别感兴趣，我试图将两个容器并排放置以完成这项工作，但没有运气。我很可能做错了什么。

另外，如果小组不是最好的解决方案，我肯定会向其他人开放。请帮忙！！！

如果我能澄清任何事情，请告诉我。

干杯，

Answer 1

Jasny Bootstrap 提供了上述功能。查看：http://jasny.github.io/bootstrap/components。

“Off Canvas”组件是我想要的。

干杯。

编辑：应 Harry 的要求（如下），这里是使用 Jasny Bootstrap 组件的示例代码。但是，您仍然需要将其库合并到您的项目中。

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
...
</nav>
<div class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>