Bootstrap模态宽度不适用于响应主题

Question

请不要删除或关闭此问题。在完整的三天搜索后，我会在此处提出问题。

我的响应式网站有很多模式可以显示数据块。模态在浏览器和小型设备上的默认宽度下工作正常。

当我以％（百分比）增加浏览器的模态宽度时，它仅在浏览器中正常工作。但是在手机和其他设备上无法正常显示。

我尝试了％min-width等，但没有运气......还有boostrap模态文档没有关于大小的信息。只有小尺寸可供选择，不符合我的要求。

其次，我使用JS代码对模态进行操作：

$(".modal-body").html("Loading...");
        $(".modal-body").load("fdeed.php");
        $("#modal_appointments").modal();
        $('#modal_appointments').modal('show');

请帮助我如何更改宽度，以便在所有设备中都能正常工作。 任何形式的帮助都非常感谢。谢谢。

Answer 1

如果你在bootstrap 3.1.0上尝试使用bootstrap提供的类，在较小的设备中使用模态。我个人从未在Extremely Small设备上测试它。使用.modal-dialog类

尝试以下类

.modal-sm - 适用于小型设备。

.modal-lg - 适用于较大的设备。

有用的链接

http://codepen.io/SitePoint/pen/KkHyw

希望它有所帮助，

Answer 2

将容器宽度设置为60％，覆盖边距并设置左侧位置应该满足您的需要：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" style="left: 20%; width: 60%; margin-left: 0px;">
   <div class="modal-dialog">

您可以在http://www.bootply.com/I0V4kQgcMD找到完整的示例 使用右侧的移动预览按钮在新窗口中查看，可以调整大小。

Answer 3

您可以通过编程方式调整最大宽度。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type=checkbox value="a|b|c|d" name="extrasSelected" /><br/>
<input type=checkbox value="e|f|g|h" name="extrasSelected" /><br/>
<input type=checkbox value="i|j|k|l" name="extrasSelected" /><br/>
<input type=checkbox value="m|n|o|p" name="extrasSelected" /><br/>
<input type=checkbox value="q|r|s|t" name="extrasSelected" /><br/>
<input type=checkbox value="u|v|w|x" name="extrasSelected" /><br/>
<input type="button" id="doLookup" value="go"/>
<div id="show" />