Twitter bootstrap Boostrap模式宽度不适用于响应主题

请不要删除或关闭此问题我在三天的搜索后将问题放在这里

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

当我将浏览器的模式宽度增加到%（百分比）时，它仅在浏览器中工作良好。但不能在手机和其他设备中正确显示

我尝试了%和最小宽度等，但没有运气。。。此外，boostrap模态文档没有关于尺寸的信息。只有一个小的和大的尺寸是可用的，不适合我的要求

第二，我反对使用JS代码的模态：

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

请帮助我如何更改宽度，以便在所有设备中都能正常工作。

---

非常感谢您的任何帮助。谢谢。

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

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

您可以在以下网址找到完整的示例：

---

使用右侧的“移动预览”按钮可在新窗口中查看，该窗口可以调整大小。

如果您使用的是bootstrap 3.1.0，请尝试使用bootstrap提供的类，以便在较小的设备中使用该模式。我个人从未在非常小的设备上测试过它。使用

.modal对话框

类尝试以下类

.modal sm

-适用于小型设备

.modal lg

-适用于大型设备

有用的链接

---

希望有帮助，

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

var m = $('#modal_appointments');
m.css('width', '850px');
m.css('max-width', '100%');
m.css('margin', '50px auto 50px auto');
m.modal('show');

---

你能提供你的网站链接吗？出于安全原因，对不起。我不能你有任何图像在模态？让我附加一个屏幕快照你能分享你的css和模态体吗？