Twitter Bootstrap流体容器边栏切换

Question

我正在使用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隐藏和span9更改为span12.这在某种程度上工作正常.但是在第二次单击时,span3首先显示,然后只有内容span12减少到span9.由于这个内容跳了下来,直到它减少到span9.我想解决这个问题.在第二次单击时,span12首先跨越9,然后侧边栏显示..类似的东西.

我见过许多类似的帖子,其中使用了"content"和"sidebar"类而不是"spanXX".但它不适合我的情况.我不知道为什么.请帮帮我..

Answer 1

span9由于jQuery添加的切换效果的动画,你的div正在跳跃,它会动画宽度和高度,因此正在切换的div周围的内容会随着动画的推移而被推下.您可以通过将动画过程加速到100毫秒级或绝对定位侧边栏来克服这个问题.至于由于bootstrap.css自身而产生的保证金问题,在第222行我们有以下内容:

.row-fluid > [class*="span"]:first-child {
  margin-left: 0;
}

所述first-child伪元素属性margin:0的第一元件,在这种情况下是被切换的边栏中,所以一旦边栏被隐藏在第二span标签(内容DIV)不继承这个属性并保持与默认margin施加到span标签,例如

.row-fluid > [class*="span"] {
  float: left;
  margin-left: 2.127659574%;
}

您可以使用jQuery克服该边际问题.

以下是我做的几个演示:

• 隐藏侧边栏没有过渡效果
• 隐藏侧边栏,具有最小的过渡效果

更新了小提琴,修复了一个评论者发现我没有注意到的问题,现在它工作正常.添加了一个.no-sidebar在切换时添加的类,它删除了margin-left引导程序创建的类,所以现在它可以很好地处理响应式样式表.

http://jsfiddle.net/andresilich/dQ5b7/23/