Twitter bootstrap 推特引导：手机上的模态

我试图弄明白为什么当模态出现时，我似乎不能点击模态中的任何东西（在移动设备上，也就是说，它在pc浏览器中工作正常）。 我有一个类似这样的代码，这是twitter引导的一个基本模式：

<!-- Modal -->

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria hidden="true">×</button>
      <h3 id="myModalLabel">choose!</h3>
    </div>
    <div class="modal-body">
      <div class="row-fluid">
       <form>
         <fieldset>
             <select class="input-large">
             <option value="0">10:15</option>
             <option value="1">12:45</option>
             <option value="2">13:15</option>
            </select>
         </fieldset>
       </form>
     </div>
   </div>
   <div class="modal-footer">
      <button class="btn pull-left" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="btn btn-primary">Save changes</button>
   </div>
</div> <!-- modal END -->

×
选择！
10:15
12:45
13:15
接近
保存更改

此模式由javascript事件打开。它可以很好地打开，但在我的手机上，我不能点击（或者我一直错过？）按钮或点击选择字段。 有什么想法吗

---

谢谢您的帮助。

找到了解决方案。。如果有人也会遇到同样的问题。 刚刚将“active”类添加到modal中，现在工作正常

class="modal hide fade active"

---

我也有同样的问题。这是由于包含了

bootstrap responsive.css

（在我的例子中是v2.0.3），当您点击输入字段并弹出关键字时，它会影响模态及其版本的正确显示。 我稍微修改了StackOverflow问题中的补丁：

.modal { 
    position: fixed; 
    top: 20px !important; 
    right: 3%; 
    left: 3%;
    width: auto; 
    margin: 0; 
}

---

在

@media（最大宽度：480px）

和

@media（最大宽度：767px）

媒体查询中，它似乎工作正常。

这里似乎工作正常：您是否尝试在移动设备上访问它？它对我不起作用。它在运行最新版本iOS的iPhone5上运行得非常好。在你的手机上访问这个：3年多之后，我需要为一个旧的bootstrap 2站点添加一个模式，这很有帮助。非常感谢。请注意，在两个媒体查询中都包含它是没有意义的

@media（最大宽度：767px）

将适用于所有较小的屏幕尺寸，并且单独使用就足够了。