如何使bootstrap關閉畫布導航重疊內容而不是移動它

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）點擊按鈕添加類。主動到內容（包括邊欄） 3）的CSS設置內容的位置與class .active左邊的...％（正確的右邊位置）內容隱藏（視口外）和navbar變得可見。 4）使用CSS3轉換完成顯示/隱藏的效果http://www.w3schools.com/css3/css3_transitions.asp

在原始示例中，內容快速50％，將其更改爲100％（或稍多一點）會產生重疊效果。

也許還看到： Toggle sidebar on mobile device with Twitter Bootstrap 2.x（容易遷移到TB3）