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

【问题标题】：Jasny Bootstrap Off Canvas 'Reveal' Method - TroubleshootingJasny Bootstrap Off Canvas 'Reveal' 方法 - 故障排除
【发布时间】：2014-10-05 00:07:41
【问题描述】：

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

我想启用“显示”选项，并一直使用以下 sn-p 代码（直接来自 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），然后将画布选项（我相信是data-canvas）设置为等于该 div；即data-canvas="#targetDiv"。

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

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

【问题讨论】：

我不明白你想隐藏什么。 data-target="#myNavmenu" 是将被隐藏的部分。 data-canvas="#targetDiv" 是永远不会被隐藏的部分。您应该查看 Jasny 示例中的 navmenu-reveal.css 文件，了解您需要设置的 CSS。
@e666：我希望将#myNavmenu 隐藏在身体的其余部分下方（而不是offcanvas）。然后，当用户单击按钮时，主体应该从#myNavmenu 的顶部滑出（而不是让它被#myNavmenu 移动或“推”）。推送功能工作正常，我只是无法让“显示”工作。我相信我已按照以下说明进行操作：jasny.github.io/bootstrap/examples/navmenu-reveal，但显然我一定做错了什么。
@Jasny-Arnold-Daniels：终于让它工作了。你可能会说我对 Jasny / Bootstrap 有点陌生。建议您在jasny.github.io/bootstrap/examples/navmenu-reveal 上更明确地说明您的说明。您可以指定哪些内容，而不是说“通过将内容包装在 div 中并将画布选项设置为针对该 div 来获得显示效果”。我以为是#myNavmenu 中的内容，结果发现是这个div 中的所有html：<div class="navbar navbar-default navbar-fixed-top">。谢谢！

标签： javascript jquery twitter-bootstrap less jasny-bootstrap

【解决方案1】：

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

【讨论】：