我正在使用twitter bootstrap开发一个应用程序. 2列布局.一个侧栏和主要内容.以下是布局.
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 target">
<!--Sidebar content-->
</div>
<div class="span9 ">
<i class="icon-chevron-left toggles"></i>
<!--Body content-->
</div>
</div>
</div>
点击内容中的链接,我想隐藏侧边栏和内容来占用整个页面.目前我设法这样做,
$(document).ready(function(){
$(window).resize(function () { plot(); });
$('.toggles').click(function() {
$('.target').toggle('fast',function() {
$('.contents').toggleClass('span12'),$('.contents').toggleClass('span9'),$('.toggles').toggleClass('icon-chevron-right'),});
});
});
但是,在隐藏span3后,我在左侧看到一个边距.这需要删除.同样在这种隐藏方法中,首先点击span3的hide和span9更改为span12.这是以某种方式工作正常.但是在第二次单击span3显示首先,然后只有内容span12减少到span9.由于这个内容跳下来,直到它减少到span9.我想解决这个问题第二次点击,span12首先跨越9,然后边栏显示..这样的东西.
我看过很多类似于“content”和“sidebar”类的帖子,而不是“spanXX”.但它在我的情况下不工作.我不知道为什么
请帮帮我..
解决方法
由于jQuery添加的切换效果的动画,您的span9 div正在向下跳动,因此它将宽度和高度都动画化,因此您正在切换的div周围的内容会随着动画的移动而被压下.您可以通过将动画处理加速至100毫秒或绝对定位边栏来克服这一点.而对于由于bootstrap.css本身而造成的保证金问题,在第222行中,我们具有以下内容：
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
第一个子伪元素属性margin：0到第一个元素,在这种情况下是侧边栏被切换,所以一旦边栏被隐藏,第二个跨标签(内容div)就不会继承这个属性,保留应用于span标签的默认保证金,例如
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.127659574%;
}
你可以用jQuery来克服边际问题.
这是我做的几个演示：
> Hiding sidebar with no transition effects
> Hiding sidebar with minimal transition effect
更新了小提琴,解决了一个评论者发现我没有注意到的问题,现在它可以正常工作.添加了一个.no-sidebar类,它在切换时添加,删除由引导创建的margin-left,所以现在它与响应样式表一起工作.
