android - 移动设备上的 Twitter Bootstrap 模式

Question

Bootstrap 模式在 Android 和 iOS 上无法正常工作。问题跟踪器承认问题，但不提供可行的解决方案:

Modals in 2.0 are broken on mobile.

Modal window in 2.0 not positioning properly

屏幕变暗，但模态本身在视口(viewport)中不可见。可以在页面顶部找到它。当您在页面上向下滚动时会出现问题。

这是 bootstrap-responsive.css 的相关部分:

.modal {
    position:fixed;
    top:50%;
    left:50%;
    z-index:1050;
    max-height:500px;
    overflow:auto;
    width:560px;
    background-color:#fff;
    border:1px solid #999;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding-box;
    background-clip:padding-box;
    margin:-250px 0 0 -280px;
}

我可以申请修复吗？

Answer 1

编辑:unofficial Bootstrap Modal modification旨在解决响应/移动问题。这可能是解决问题的最简单和最容易的方法。

此后在 one of the issues you discussed earlier 中找到了一个修复程序。

在 bootstrap-responsive.css

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%; 
    width: auto; 
    margin: 0; 
}
.modal-body { 
    height: 60%; 
}

并在 bootstrap.css

.modal-body { 
    max-height: 350px; 
    padding: 15px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
 }