javascript - Jasny Bootstrap Off Canvas 'Reveal' 方法 - 故障排除

标签 javascript jquery twitter-bootstrap less jasny-bootstrap

已成功让 Jasny Bootstrap off canvas 组件正常工作。它有一些不同的响应设置,但默认为“推送”选项:( http://jasny.github.io/bootstrap/examples/navmenu-push/ )。

我想启用“显示”选项,并使用以下代码片段(直接来自 Jasny BS 站点)作为示例:

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

正如“显示”页面 ( http://jasny.github.io/bootstrap/examples/navmenu-reveal/ ) 上的说明所述,我有:

1) 将内容包装在 div 中(上面的 targetDiv),然后将 canvas 选项(我认为是 data-canvas)设置为等于该 div;即data-canvas="#targetDiv"

2) 从 myNavmenu 导航中删除了 offcanvas 类,并通过 less 将其 z-indez 设置为 0。

我得到的结果与示例不同:http://jasny.github.io/bootstrap/examples/navmenu-reveal 。我做错了什么?

最佳答案

对于尝试创建“显示”效果代替“推送”效果的用户,请按照以下说明操作:http://jasny.github.io/bootstrap/examples/navmenu-reveal 。我想澄清一下,说明所指的“内容”是 Canvas 上的任何内容。在我上面的示例中, Canvas 仅包含导航栏,即 <div class="navbar navbar-default navbar-fixed-top"> 。将新的命名 div 围绕此内容进行包装,同时进行其他更改,效果完美。

关于javascript - Jasny Bootstrap Off Canvas 'Reveal' 方法 - 故障排除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26198376/

相关文章:

javascript - 如何获取 KendoDataSource 的 JSON 部分

css - 是否可以控制 Rails 读取 .CSS 文件的顺序,或者它是否按惯例固定?

html - 底部没有间距的边框图像

javascript - 自定义样式的复选框无法正常工作

javascript - Angular 错误日志发送到elasticsearch

javascript - 如何使用 JavaScript 将图像转换为 Base64 字符串?

html - 通过 Bootstrap 在导航栏搜索中使用输入而不是表单

JavaScript:使用 openpgp.js 解密 GnuPG 加密文件的内容

php - 使用 mysql php 和 ajax 进行动态导航

jquery - Bootstrap 3 下拉菜单不适用于 Rails 4 和 Turbolinks