javascript - 如何使 bootstrap off canvas nav 重叠内容而不是移动它

Question

我喜欢 bootstrap 3 的 Canvas 外功能: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

Canvas 外功能不是 bootstrap 的默认功能。 该演示展示了您可以使用 Bootstrap、css、mediaqueries 和 javascript (jQuery) 做什么。

1) 媒体查询在屏幕宽度低于 768px 时隐藏侧边栏(css 负右位置) 2) 单击按钮将类 .active 添加到内容(包括侧边栏) 3) css 将 .active 类内容的位置设置为左侧... %(正右位置)内容隐藏(在视口(viewport)之外)并且导航栏变得可见。 4) 显示/隐藏的效果是用CSS3 transitions完成的http://www.w3schools.com/css3/css3_transitions.asp

在原来的例子中，content swift 为 50%，将其更改为 100%(或更多一点)将产生重叠的效果。

也许还看到: Toggle sidebar on mobile device with Twitter Bootstrap 2.x (易于迁移到 TB3)