Bootstrap 两个并排模态

Question

我有一个显示各种信息的模态，触发单个模态效果很好。 但是，当我尝试应用 Bootstraps 的网格逻辑来放置 2 个并排模式时，我失败了。 这是单个模态的代码：

<div class="modal fade bd-example-modal-lg" tabindex="-1" id="my_modal" role="dialog"
 aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Raw Data</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body modal-body-right">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

FWIW 我正在使用以下方法通过 JS 加载模态：

$('.modal-body').load("/path/to/modal.html", function () {
    $('#my_modal').modal({
      show: true
    })
});

如何将这两个模态并排放置？ 谢谢！

Answer 1

使用 CSS 来定位.modal-content ...

#modal1 .modal-content {
    margin-left: -50%;
}

#modal2 .modal-content {
    margin-left: 50%;
}

演示： https : //www.codeply.com/go/V4Eda15hEJ