ブートストラップの折りたたみは最初にアニメーション化されておらず、最初の時間の後にジッタのあるアニメーションがあります

Question

ブートストラップの折りたたみはアニメーションが少なく、初めて折りたたむときと同じように表示されます。アニメーションなしでブロックしますが、折りたたみ可能な要素が隠れているときにはジッタがありませんし、すべてが私の驚きには正常ですが、その後は再び要素を崩壊させるたびに不安定になります。

ここフィドルです：

<div class="container-fluid" style="height:100%;"> 
<a href="#social" class="btn" id="socialToggle" data-toggle="collapse">Social Media <span id="bottomChevron" class="fa fa-chevron-circle-down" style="font-size:90%;"></span></a> 

    <div class="container collapse" id="social"> 

    <div class="col-md-12"> 

    <ul id="socialList"> 
    <li><a href="#"><span class="fa fa-facebook-f"></span></a></li> 
    <li><a href="#"><span class="fa fa-google-plus"></span></a></li> 
    <li><a href="#"><span class="fa fa-github-alt"></span></a></li> 
    <li><a href="#"><span class="fa fa-twitter"></span></a></li> 
    </ul> 

    </div> 

    </div> 
    </div> 

：神経質崩壊に関わるほとんどの問題は、HTML（他の人が同様にパディングを含まれていますが、私は私の要素のパディングを持っていない）によって引き起こされたので、 https://jsfiddle.net/fyuskf9v/

とhtml

cssのためのフィドルを見てください。

#socialで「高さ：33％」を削除すると最初のバグ（最初のクリックアニメレス）が修正され、「高さ：100％」を削除すると2番目のバグ".col-md-12"（最後の要素の直接の子）。

高さによるブートストラップの崩壊のバグに関するリンクを私に提供してください。

Answer 1

私の2番目のコメントが示すように、それは高さのパーセンテージです。これは動作します：

#social { 
width:100%; 
xxheight:100px; 
padding:0 
} 

#social .col-md-12 { 
width:100%; 
height:300px; 
padding:0; 
}