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

这是因为崩溃内容的所有元素都是浮动的。由于col-xs-12元素上的p类，这种情况正在发生。您可以将其删除或将其float设置为none。此外，margin也不适用于Bootstrap的崩溃。修复方法是将其更改为padding。

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

此处的实例：http://www.bootply.com/XwYztUl4u5

Bootstrap崩溃跳起而不是动画

1 个答案: