jquery - Bootstrap Collapse 第一次没有动画，第一次后有抖动动画

Question

所以 Bootstrap 折叠在第一次折叠时只是动画较少，就好像我使用 javascript 将显示从无更改为没有动画的 block ，但是当可折叠元素被隐藏时，没有抖动令我惊讶的是一切都正常，但在那之后每当你再次折叠元素时它就会紧张。

这是 fiddle :https://jsfiddle.net/fyuskf9v/

和 html，因为大多数涉及抖动崩溃的问题都是由 html 引起的(其他问题也包括填充，但我的元素上没有填充):

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

请参阅 CSS 的 fiddle 。

当我删除#social 上的“height:33%”时，第一个错误(第一次点击无动画)得到修复，当我删除“height:100%”时，第二个错误(变得可见时抖动)得到修复.col-md-12"(最后一个元素的直接子元素)。

请向我提供有关由高度引起的 bootstrap 崩溃错误的任何链接。

Answer 1

正如我的第二条评论所指出的，这是高度的百分比。这有效:

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

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