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