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