我有一个显示各种信息的模态,触发单个模态完美。但是,当我尝试应用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">×</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
})
});
如何将这两个模态并排放置?谢谢!
使用CSS定位.modal-content
...
#modal1 .modal-content {
margin-left: -50%;
}
#modal2 .modal-content {
margin-left: 50%;
}
但是:ぁzxswい