Bootstrap Collapse ist nicht das erste Mal animiert und hat eine jitterige Animation nach dem ersten Mal

Question

so der Bootstrap-Kollaps ist einfach Animation weniger, wenn es zum ersten Mal zusammenbricht, es ist genauso, als ob ich Javascript verwendet, um die Anzeige von keiner zu ändern blockiere ohne Animationen, aber wenn das faltbare Element versteckt wird, gibt es kein Zittern und alles ist normal zu meiner Überraschung, aber danach, wenn du das Element wieder zusammenlegst, ist es nervös.

hier ist die Geige: https://jsfiddle.net/fyuskf9v/

und die html, da die meisten Probleme jittery kollabiert Beteiligung durch den HTML-Code verursacht wurden (andere Polsterungen auch enthalten, aber ich habe keine Polsterung auf meine Glieder):

<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> 

Siehe die Geige für die CSS.

Der erste Fehler (erster Klick Animationslosigkeit) ist behoben, wenn ich "Höhe: 33%" auf #social entfernen, und der zweite Fehler (nervös, wenn sichtbar wird) wird behoben, wenn ich "Höhe: 100%" auf dem entfernen ".col-md-12" (direktes Kind des letzten Elements).

Bitte stellen Sie mir alle Links zur Verfügung Bootstrap Kollaps Bugs durch Höhen verursacht.

Answer 1

Wie mein zweiter Kommentar zeigt, sind es die Prozentangaben auf den Höhen. Das funktioniert:

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

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