如何使画布导航重叠内容而不是移动它的引导程序

Question

我喜欢bootstrap 3具有的画布外功能：http://getbootstrap.com/examples/offcanvas/。但是，对于我的一个项目，我希望它重叠内容而不是将内容移到一边。这可能吗？如果是这样的话？

这就是重叠的意思：

Answer 1

更新（根据您的评论和新草图）

请参阅：http://bootply.com/78559

<强> HTML ：

<div class="container">

<div class="row">
    <div class="col-sm-9" style="background-color:lightgreen;height:500px;">
        Content

        <button id="navigator">Show Nav</button>
    </div>
    <div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>
</div>


  <hr>

  <footer>
    <p>&copy; Company 2013</p>
  </footer>

</div><!--/.container-->

<强> CSS ：

@media (max-width: 767px) 
{ 

    .sidenav
    {
        position: absolute;
        top: 50px;
        height: 0px;
        width: 0px;
        overflow: hidden;
        left:100%; 
        padding:0;
    }

    .sidenav.on
    {    

        width:50%;
        left:50%;
        -webkit-transition: all 2s ease 0s;
        -moz-transition: all 2s ease 0s;
        -o-transition: all 2s ease 0s;
        transition: all 2s ease 0s;

    }   

}

的javascript：

 $('#navigator').click(function(){$('div.sidenav').toggleClass('on');});

-

是的，请参阅：http://bootply.com/77207

非画布功能不是引导程序的默认功能。 这个演示展示了你可以用Bootstrap，css，mediaqueries和javascript（jQuery）做些什么。

1）媒体查询在屏幕宽度低于768px时隐藏侧边栏（css为负右位置） 2）单击按钮将类.active添加到内容（包括侧边栏） 3）css设置内容的位置，类为.active，左侧为...％（正右侧位置）内容隐藏（视口外），导航栏变为可见。 4）显示/隐藏的效果是通过CSS3过渡http://www.w3schools.com/css3/css3_transitions.asp

完成的

在原始示例中，内容快速增加50％，将其更改为100％（或多一点）将产生重叠效果。

也许还能看到： Toggle sidebar on mobile device with Twitter Bootstrap 2.x（易于迁移到TB3）