我正在使用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”。但它不适合我的情况。我不知道为什么。 请帮帮我..
答案 0 :(得分：14)
由于jQuery添加的切换效果的动画，你的span9 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，因此现在它可以正常使用响应式样式表。
答案 1 :(得分：0)