如何使用 Twitter bootstrap 创建可折叠侧边栏答案

【问题标题】：How do you create a collapsable sidebar using Twitter's bootstrap如何使用 Twitter bootstrap 创建可折叠侧边栏
【发布时间】：2012-01-12 20:10:35
【问题描述】：

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

我也一直在看here

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

这很容易实现……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');
});

【讨论】：

I updated the fiddle (fixed bootstrap css hosting and deprecated jquery methods)

【解决方案2】：

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

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

【讨论】：