Bootstrap折叠具有snap \ jitter

Question

使用Bootstrap（3.3.6）折叠，可折叠的DIV位于表单输入\标签之间。当DIV展开\隐藏时，会有一种快速抖动。

对于该问题的代码：https://jsfiddle.net/ybto1zvk/

我已经看到了类似的帖子谈论时的DIV的一个具有填充抖动，但你可以看到，有什么不同之处是引导未施加造型...

已经尝试过使用Chrome和Firefox，没有区别。

HTML

<form role="form"> 
    <div class="radio"> 
    <label> 
     <input type="radio" name='radioinput' id="radio1"> One (click me) 
    </label> 
    </div> 
    <div class="collapse" id="collapse-1"> 
    <div class="well"> 
     Sub 1 
    </div> 
    </div> 

    <div class="radio"> 
    <label> 
     <input type="radio" name='radioinput' id="radio2"> Two 
    </label> 
    </div> 
    <div class="collapse" id="collapse-2"> 
    <div class="well"> 
     Sub 2 
    </div> 
    </div> 

    <div class="radio"> 
    <label> 
     <input type="radio" name='radioinput' id="radio3"> Three 
    </label> 
    </div> 
    <div class="collapse" id="collapse-3"> 
    <div class="well"> 
     Sub 3 
    </div> 
    </div> 

</form> 

的javascript

$('#radio1').click(function() { 
    $('#collapse-1').collapse('toggle'); 
    $('#collapse-2').collapse('hide'); 
    $('#collapse-3').collapse('hide'); 

}); 

$('#radio2').click(function() { 
    $('#collapse-2').collapse('toggle'); 
    $('#collapse-1').collapse('hide'); 
    $('#collapse-3').collapse('hide'); 
}); 

$('#radio3').click(function() { 
    $('#collapse-3').collapse('toggle'); 
    $('#collapse-1').collapse('hide'); 
    $('#collapse-2').collapse('hide'); 

}); 

Answer 1

这是通过下边距属性（由自举设置）就做好了被引起的。尝试添加：

.well{margin:0} 

到你的CSS，这应该解决问题。

Answer 2

此问题是由于折叠边缘。按Mozilla文档：

家长和第一/最后一个孩子：如果没有边框，填充，内嵌的内容，或者间隙块的上边距从最初的上边距分开子块或无边框，填充，内联内容，高度，最小高度或最大高度将块的边缘底部与其最后一个子块的边缘底部分开，然后这些边距将折叠。折叠后的保证金最终在家长之外。

在你的情况下.wellmargin-bottom内.collapse创造这个问题。你可以通过很多方式解决这个问题。但两种方式都

1. 添加overflow: hidden于母公司
2. 从.well

这里删除margin-bottom的工作Fiddle