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

上面的工作正常。

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

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>