twitter-bootstrap - 如何使用Twitter的 bootstrap 创建可折叠的侧边栏

我一直在尝试创建一个侧边栏，该侧边栏将使用Twitter的Bootstrap项目进行扩展和折叠，但是我无法使其正常工作。我正在尝试以其基本的容器流体布局为起点。我什至无法正确隐藏侧边栏，并将“内容”区域扩展到屏幕的整个宽度。而是，边栏文本将消失，但内容区域将不会扩展。我已经更改了侧边栏和内容的宽度，但似乎无法对其进行更改。感谢您对此的任何帮助。

我也一直在寻找here

最佳答案

这很容易实现... Please see the following Fiddle..

不过，这是要点……基本上，在鼠标不事件一秒钟后，侧边栏的获取就被隐藏了。您将主要块换出了content(具有侧边栏)和container-fluid(无侧边栏)，并隐藏了侧边栏。那样简单。

function onInactive(ms, cb){
    var wait = setTimeout(cb, ms);
    document.onmousemove = document.mousedown =
    document.mouseup = document.onkeydown =
    document.onkeyup = document.focus =
    function(){
        clearTimeout(wait);
        wait = setTimeout(cb, ms);
}; }
var sidebar = $('div.sidebar');
var content = $('div.content');
$('body').live('mousemove', function(event) {
    sidebar.addClass('sidebar').fadeIn();
    content.addClass('content').removeClass('container-fluid');
});

onInactive(1000, function(){
    sidebar.fadeOut(300);
    content.removeClass('content').addClass('container-fluid');
});

关于twitter-bootstrap - 如何使用Twitter的 bootstrap 创建可折叠的侧边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7984819/