移动设备上的 Twitter Bootstrap 模式 [英] Twitter Bootstrap modal on mobile devices

问题描述

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

2.0 中的模式在移动设备上已损坏.

2.0 中的模态窗口定位不正确

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

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

.modal {位置:固定；顶部:50%；左:50%；z-索引:1050；最大高度:500px；溢出:自动；宽度:560px；背景色:#fff;边框:1px 实心 #999;-webkit-border-radius:6px;-moz-border-radius:6px;边框半径: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;背景剪辑:填充框；边距:-250px 0 0 -280px;}

是否有我可以应用的修复程序?

解决方案

An 非官方的 Bootstrap Modal 修改 旨在解决响应式/移动问题.这可能是解决问题的最简单、最简单的方法.

此后在您之前讨论的问题之一中找到了修复程序>

在bootstrap-responsive.css

.modal {位置:固定；最高:3%；正确:3%；左:3%；宽度:自动；边距:0；}.modal-body {高度:60%；}

并在bootstrap.css

.modal-body {最大高度:350px；填充:15px；溢出-y:自动；-webkit-overflow-scrolling:触摸；}

Bootstrap modals don't work correctly on Android and iOS. The issue tracker acknowledges the problem but does not offer a working solution:

Modals in 2.0 are broken on mobile.

Modal window in 2.0 not positioning properly

The screen darkens but the modal itself is not visible in the viewport. It's possible to find it at the top of the page. The problem occurs when you've scrolled down on the page.

Here is a relevant portion of 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;
}

Is there a fix I can apply?

解决方案

EDIT: An unofficial Bootstrap Modal modification has been built to address responsive/mobile issues. This is perhaps the simplest and easiest way to remedy the problem.

There has since been a fix found in one of the issues you discussed earlier

in bootstrap-responsive.css

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

and in bootstrap.css

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

这篇关于移动设备上的 Twitter Bootstrap 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！