Bootstrap 折叠破坏了 WordPress 网站中的行和列布局

Question

我正在尝试在 Wordpress 网站中创建一个带有 Bootstrap 折叠的手风琴。当内容扩展时，一瞬间它看起来应该是这样，之后文本从行和列网格中脱离出来，并在随机位置保持在所有内容的顶部。我该如何解决这个问题？

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

初始状态： enter image description here

展开后的瞬间视图： enter image description here

完全展开并打破布局： enter image description here

Answer 1

问题已解决 - .collapse.in class 的自定义样式与 position: static 导致此行为。

Bootstrap 折叠破坏了 WordPress 网站中的行和列布局

Bootstrap collapse breaks row and columns layout in WordPress site

wordpress

collapse