Bootstrap 4模式背景在移动设备上无响应

时间:2019-07-19 17:21:21

标签: html css bootstrap-4

<script type="text/javascript">
    $(window).on('load',function(){
        $('#loginerrormodal').modal('show');
    });
</script>

<div class="modal fade" tabindex="-1" role="dialog" id="loginerrormodal">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-white">
            <div class="modal-header">
                <h5 class="modal-title">...</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

当我在移动设备上运行模式时,黑色背景没有响应: (页面加载时的模式操作,所以我没有启动它的按钮)

This is what I mean

我该如何解决?

2 个答案:

答案 0 :(得分:1)

在您提供的实时版本中可能会看到,element超出了设备的总数width,这干扰了modal

使用类card bg-white mx-auto查找div,并删除inline style的{​​{1}}(用于移动设备断点(480px))。

如果这不可能,则可以使用width: 30rem创建media query来覆盖!important,如下所示:

inline style

希望有帮助。

答案 1 :(得分:0)

我对此进行了修正:

.modal-backdrop {
    height: 100%;
    width: 100%;
}