Question

我想在bootstrap中使用包含响应的列来并排打开两个bootstrap模式弹出窗口。我的意思是，在中等屏幕和大屏幕中，模态应该是并排的，并且在小的和超小屏幕中，一个在顶部，另一个在底部。在他们的专栏中100％。

<div class="modal col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left" id="modal-one" data-backdrop=false data-keyboard="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title" style="color: black;">Test Header1
                    </h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>


<div class="modal col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right" id="modal-two" data-backdrop=false data-keyboard="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title" style="color: black;">Test Header2
                    </h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>


<script>
    $('#modal-one').modal();
    $('#modal-two').modal();
</script>

这是打开两个模态，但它们是重叠的。

这是我的JS-fiddler

Answer 1

你试过吗

.modal {
position:relative;
}

尝试使用类似以下的媒体查询：

@media only screen and (max-width: 500px) {
    .modal {
        position: relative;
    }
}

两个bootstrap模态并排响应

1 个答案: