Javascript 自举两个并排模态

我有一个显示各种信息的模态，触发一个模态就完美了。然而，当我尝试应用引导的网格逻辑来放置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>

---

如何将这两个情态动词并排放置？谢谢

使用CSS定位

.modal内容

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

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

---

演示：

部分，将第一个模式设置为“左边距”：0%工作。谢谢

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

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