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

问题描述

引导模态不会在Android和iOS的正常工作。问题跟踪承认这个问题，但并没有提供一个可用的解决方案：

在2.0

情态动词在移动破碎。

2.0没有定位

模态窗口中正常

的屏幕变暗，但模态本身不是在视口中可见。它可能发现它在页面的顶部。当你在页面上向下滚动时出现问题。

下面是引导-responsive.css的相关部分：

  .modal {
位置：固定;
顶部：50％;
左：50％;
的z-index：1050;
最大高度：500px的;
溢出：汽车;
宽度：560px;
背景颜色：#FFF;
边界：1px的固体＃999;
-webkit-边界半径：6px;
-moz-边界半径：6px;
边界半径：6px;
-webkit-箱阴影：0的3px 7px的RGBA（0，0，0，0.3）;
-moz-箱阴影：0的3px 7px的RGBA（0，0，0，0.3）;
箱阴影：0的3px 7px的RGBA（0，0，0，0.3）;
-webkit-背景剪辑：填充盒;
-moz-背景剪辑：填充盒;
背景剪辑：填充盒;
保证金：-250px 0 0 -280px;
}
 

有没有修复，我可以申请吗？

解决方案

编辑：一个非官方引导莫代尔修改已建成以解决响应/移动的问题。这也许是解决问题的最简单和最容易的方式。

目前，此后一直在发现了一个修复你前面讨论过的

在引导-responsive.css

  .modal {
    位置：固定;
    顶部：3％;
    右：3％;
    左：3％;
    宽度：自动;
    保证金：0;
}
.modal体{
    高度：60％;
}
 

和 bootstrap.css

  .modal体{
    最大高度：350像素;
    填充：15px的;
    溢出-Y：自动;
    -webkit-溢出滚动：触摸;
 }
 

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引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！