ブートストラップ折りたたみスナップ\ジッタ

Question

折りたたみ可能なDIVがフォーム入力\ labelsの間にあるブートストラップ（3.3.6）の折りたたみを使用します。 DIVが\ hideを展開すると、ある種のスナップ\ジッタがあります。

問題のコード：私はdiv要素の一つは、パディングを持っているジッタについて同様のポストの話を見て、しかし、あなたが見ることができるように、ブートストラップが適用されているもの以外にスタイリングありませんしましたhttps://jsfiddle.net/ybto1zvk/

...

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> 

ジャバスクリプト

$('#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ドキュメントあたりとしてブロックのマージン - ボトムを最後の子のマージン - ボトムから分離するための境界、パディング、インラインコンテンツ、高さ、最小高さ、または最大高さがない場合、それらのマージンは崩壊します。崩壊したマージンは親の外側で終わる。 .collapse内部.wellのあなたのケースmargin-bottomに

この問題を作成しています。この問題はさまざまな方法で解決できます。しかし、二つの方法が

1. overflow: hiddenここ

.wellからmargin-bottomを削除

親に追加がFiddle

作業されています