Bootstrap折叠打破了WordPress网站的行和列布局。

Question

我试图在一个Wordpress网站中使用Bootstrap collapse创建一个手风琴。当内容展开时，它看起来就像它应该的一瞬间，之后文本从行和列的网格中分离出来，只是保持在所有内容的顶部，位置随机。如何解决这个问题？

<div class="container">
<div class="row">
    <div class="col-12">
        <p>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
            </a>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Button with data-target
            </button>
        </p>
    </div>
</div>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        <div class="row">
            <div class="col-12">
                <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </p>
            </div>
        </div>
    </div>
</div>

初始状态。在这里输入图片描述

展开后的分秒查看。在此输入图像描述

全面展开，突破布局。在此输入图片说明

Answer 1