html - Bootstrap 4 模态背景在移动设备上没有响应

Question

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

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

我该如何解决？

Answer 1

在您提供的实时版本中可以看到，有一个元素超出了设备的总宽度，这干扰了模态。

找到 <div>使用类“card”、“bg-white”和“mx-auto”并删除 width: 30rem 的内联样式用于移动设备断点 (480px)。

如果那不可能，您可以使用 !important 创建媒体查询覆盖内联样式，像这样:

@media (max-width: 480px) { // the breakpoint that the problem is ocurring
  .card.bg-white.mx-auto {
    width: 100% !important; // it should work instead of 30rem
  }
}