Bootstrap 模式不适合屏幕

Question

我实际上在做一个网站项目，应该适合 IOS 和 Android。然后是我的问题：

在 IOS/Android 分辨率下：我在 window 中有一个打开模式的按钮，其中包含比分辨率大的 table。这个table从页面出来了，但这是正常的，这就是我想要的。当我单击时，该按钮成功打开了模式，但此模式不适合可见屏幕：它适合整个页面，因此它不完全可见。

我想要的是适合屏幕尺寸的模式。并且没有被 window 部分屏蔽，我们必须滚动才能查看。这应该是可能和现实的，但我尝试了很多都没有成功。

我给你发一些截图让你更清楚地看到我的问题：

1/ window 与按钮："Launch Demo Modal" first exemple

2/ window 当我点击按钮时出现模态框 second exemple

我的问题在第二张图片上。我希望模式适合屏幕。

代码：

    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

非常感谢您的任何回答，

Answer 1

您需要添加此媒体查询。

 @media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
 }

Bootstrap 模式不适合屏幕

Bootstrap Modal doesn't fit screen

css

modal-dialog

twitter-bootstrap