Twitter bootstrap 如何使用Twitter创建可折叠的侧边栏；s引导

我一直在尝试创建一个边栏，它将使用Twitter的Bootstrap项目进行扩展和折叠，但我无法让它工作。我试图使用他们的基本容器流体布局作为起点。我甚至不能正确地隐藏侧边栏并将“内容”区域扩展到屏幕的全宽。相反，侧边栏文本将消失，但内容区域不会扩展。我已经改变了边栏和内容的宽度，但我似乎无法改变它。谢谢你在这方面的帮助

---

我也一直在寻找

Bootstrap中的布局问题是它们不是流动的-如果您使用它们的任何span类进行布局，它们都是固定值（请查看Bootstrap.css）。现在，也就是说，他们的容器流体类是流体类的。它的最小宽度设置为940px，当与边栏类一起使用时，它的边距为240px。这就是为什么你的边栏没有崩溃

---

您可以修改引导css（有点违背目的，IMO），或者创建一个“自定义”样式表，或者使用覆盖引导类的内联样式，并“热连接”这些类以满足您的需要，而不直接影响引导css（使其易于升级）。

这很容易实现

这是它的要点，不过…基本上，侧边栏在鼠标不活动一秒钟后被隐藏。您可以为主块调出

内容

（有侧栏）和

容器流体

（无侧栏），并隐藏侧栏。就这么简单

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');
});