设法使Jasny Bootstrap off canvas
组件正常工作。它具有一些不同的响应设置,但默认情况下是'push'选项的(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)从
offcanvas
导航中删除myNavmenu
类,并通过less将其z-indez设置为0。我得到的不像示例:http://jasny.github.io/bootstrap/examples/navmenu-reveal。我做错了什么?
最佳答案
对于试图创建“显示”效果代替“推送”效果的用户,请遵循以下说明:http://jasny.github.io/bootstrap/examples/navmenu-reveal。我想澄清一下,说明所指的“内容”是画布上的任何内容。在我上面的示例中,画布仅包含导航栏,即<div class="navbar navbar-default navbar-fixed-top">
。在进行其他更改的同时,将新的名为div的内容环绕在内容上,并且效果很好。