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>

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

1 个答案: