防止表格元素脱离 Bootstrap 列和手风琴部分

如何解决防止表格元素脱离 Bootstrap 列和手风琴部分

我有一个 table 元素，它是一个 Telerik 编辑器元素。 它以模式显示以提供编辑功能。 问题是我使用折叠部分在模态中显示各种选项。当显示表格部分时（radeditor 脱离引导列。我试过把它放在一张卡片中，但没有运气。这是我当前的设置。我暂时删除了 modal-dialog 和 modal-body 标签问题是表格元素脱离了引导行和列，包括卡片。是否有引导类可以防止表格脱离布局？

    <div class="modal-header">
    <div>heading For Collapsed Area</div>
    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapSEOne">
        Button to Show Collapsed Section
    </button>
</div>
<div id="collapSEOne" class="collapse collapsed py-4" data-parent="#accordionExample">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <input><input>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div>radeditor renders as a table</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-header">
    <div>heading For Collapsed Area</div>
    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapSEOne">
        Button to Show Collapsed Section
    </button>
</div>
<div id="collapseTwo" class="collapse py-4" aria-labelledby="headingTwo" data-parent="#accordionExample">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <input>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <input>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button></button>
    <button></button>
</div>

</div>