Bootstrap 引导程序塌陷跳起来而不是动画

ecfdbz9o  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(121)

我有元素与靴带崩溃,但可悲的是,它是跳起来,而不仅仅是动画。
于飞:

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

第二版
我也有没有 Package 器的代码-这在两个方向上动画,但有丑陋的跳跃在隐藏结束:/
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也是一样。
有人能帮我弄清楚为什么它的动画效果不好吗?

wbgh16ku

wbgh16ku1#

这是因为折叠内容的所有元素都是浮动的。这是由于p元素上的col-xs-12类造成的。您可以删除它或将其float设置为none。另外,margin也不能很好地与引导程序的折叠一起工作。修复方法是将其更改为padding

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

此处为示例:http://www.bootply.com/XwYztUl4u5

相关问题