引导折叠会跳起来而不是动画

Question

我有一个带有Bootstrap崩溃的元素，但遗憾的是它是跳起来的，而不是动画。

HTML:

    <section class="row faq-item">
        <h3 class="col-xs-11 col-md-10 faqalign" onclick="expand_faq(this);" data-toggle="collapse" data-target="#faq1" aria-expanded="false" aria-controls="faq1">
            Czy wystawiają państwo fakturę z odroczonym terminem płatności?
        </h3>
        <div class="collapse" id="faq1">
            <p class="col-xs-12">
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
            </p>
        </div>
    </section>

CSS

 div.faq-list {
    border-top: 1px solid #d6dae3;
    overflow: hidden;
 }
.faq-item {
    border-bottom: 1px solid #d6dae3;
}
.faq-item p {
    margin-top: 9px;
}
 .faqalign {
    vertical-align: middle;
    float: none;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
 }
 .faq .icon-plus, .faq .icon-minus {
    font-size:20px;
 }
.faq .icon-plus::before, .faq .icon-minus::before{
    float: right;
}
.faq a {
    text-decoration: underline;
}
.faq h3 {
    font-size: 14px;
}

第二版

我也有没有包装器的代码-这在两个方向上都有动画，但在隐藏的末尾有难看的跳跃:/

HTML

    <section class="row faq-item">
        <h3 class="col-xs-11 col-md-10 faqalign" onclick="expand_faq(this);" data-toggle="collapse" data-target="#faq3" aria-expanded="false" aria-controls="faq3">Jaki jest czas realizacji zamówienia?</h3>
        <p class="col-xs-12 collapse" id="faq3">
            Lorem ipsum lorem ipsum lorem upsumasdasdasd adas dasd asd  <a href="#">ipsum.</a>
        </p>
    </section>

CSS是一样的

谁能帮我弄清楚为什么它不动画好?

Answer 1

这是因为折叠内容的所有元素都是浮动的。这是由于p元素上的col-xs-12类而发生的。您可以删除它或将其float设置为none。此外，margin也不能很好地与Bootstrap的崩溃。修复方法是将其更改为padding。

.faq-item p {
    float: none;
    padding-top: 9px;
}

这里的实例:http://www.bootply.com/XwYztUl4u5