如何使用Twitter的引导程序创建可折叠的侧边栏

Question

我一直在尝试使用Twitter的Bootstrap项目创建一个可以扩展和折叠的侧边栏,但我无法让它工作.我试图使用他们的基本容器 - 流体布局作为起点.我甚至无法正确隐藏侧边栏并将"内容"区域扩展到屏幕的整个宽度.相反,侧边栏文本将消失,但内容区域不会扩展.我已经改变了侧边栏和内容的宽度,但我似乎无法改变它.感谢您的帮助.

我也一直在这里看

Answer 1

这很容易实现...... 请参阅以下小提琴..

这是它的要点,但是......基本上,侧边栏在鼠标闲置一秒钟后隐藏起来.您为主要块替换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');
});

Answer 2

Bootstrap 中布局的问题是它们不是流动的 - 如果您使用它们的任何跨类进行布局，它们都是固定值（查看 bootstrap.css）。现在，话虽这么说，他们的容器流体类别是流体——有点像。它的最小宽度设置为 940px，当与侧边栏类一起使用时，它的边距为 240px。这就是你的侧边栏没有折叠的原因。

您可以修改引导程序CSS（有点违背了目的，IMO），或者创建一个“自定义”样式表或使用覆盖引导程序类的内联样式，并“热线”这些类以满足您的需求，而不会直接损害引导程序CSS （使其易于升级）。