Question

我实际上正在研究一个适合IOS和Android的网站项目。然后，我的问题出现了：

在IOS / Android分辨率中：我在一个窗口内打开一个模态按钮，该窗口包含一个大于分辨率的表格。这张表从页面中删除，但这是正常的，这就是我想要的。当我点击时，该按钮成功打开模态，但此模式不适合可见屏幕：它适合整个页面，因此，它不完全可见。

我想要的是适合屏幕尺寸的模态。并没有被窗口部分掩盖，我们必须滚动查看。这应该是可行和现实的，但我尝试了很多而没有任何成功。

我发送了一些截图，让您更清楚地看到我的问题：

1 /带按钮的窗口：＆＃34;启动演示模式＆＃34; first exemple

2 /单击按钮时窗口出现模式 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 Modal不适合屏幕

1 个答案: