我一直在尝试使用 Twitter 的 Bootstrap 项目创建一个可以展开和折叠的侧边栏,但我无法让它工作。我正在尝试使用他们的基本容器流体布局作为起点。我什至无法正确隐藏侧边栏并将“内容”区域扩展到屏幕的整个宽度。相反,侧边栏文本将消失,但内容区域不会扩大。我已经改变了侧边栏和内容的宽度,但我似乎无法改变它。感谢您对此的任何帮助。
我也一直在看这里
我一直在尝试使用 Twitter 的 Bootstrap 项目创建一个可以展开和折叠的侧边栏,但我无法让它工作。我正在尝试使用他们的基本容器流体布局作为起点。我什至无法正确隐藏侧边栏并将“内容”区域扩展到屏幕的整个宽度。相反,侧边栏文本将消失,但内容区域不会扩大。我已经改变了侧边栏和内容的宽度,但我似乎无法改变它。感谢您对此的任何帮助。
我也一直在看这里
这很容易实现...... 请看下面的小提琴..
不过,这就是它的要点……基本上,在鼠标不活动一秒钟后,侧边栏就会被隐藏。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');
});
Bootstrap 中布局的问题在于它们不是流动的——如果您使用它们的任何跨度类进行布局,它们是固定值(查看 bootstrap.css)。现在,话虽如此,他们的容器流体类是流体 - 有点。它的最小宽度设置为 940 像素,当与侧边栏类一起使用时,它有 240 像素的边距。这就是为什么您的侧边栏没有折叠的原因。
您可以修改引导 css(有点违背目的,IMO),或创建“自定义”样式表或使用覆盖引导类的内联样式,并“热线”这些类以满足您的需求,而不会直接影响引导 css (使其易于升级)。