Twitter的引导模态宽度问题(Twitter Bootstrap Modal Width iss

2019-08-05 22:38发布

我的应用程序拥有许多情态,都具有不同的宽度。 我知道你可以做的事情等设定的模式内嵌的宽度:

宽度:400像素保证金左:-200px;

这个伟大的工程,但是如果你压缩你的窗口,它会踢屏幕模式50%,所以你看不到模态的一半使之无用,在这些小的决议。 在一个iPad的有关决议就可以看到这一点。

现在到这个问题,如果在主bootstrap.css文件设置模式对话框的宽度,只有一个宽度可以完美运行。 所以,如果我设置宽度为400和利润率左-200,所有的情态将在这个宽度工作。 但是,如果我继续前进,在一个模式做内联CSS和实例来:

宽度:900px保证金左:-450px

如上所述,它会以较低的分辨率打破。

我究竟做错了什么? 难道Twitter的引导只提供,以一个模态宽度工作在各种分辨率的能力吗?

我有截图,但在StackOverflow上的管理员显然不允许我发布这些来帮助你们。

下面是一个将在因为这样的宽度内联的较低分辨率打破了模态的一个示例:

<div id="add-edit-project-modal" class="modal hide fade" style="width: 320px; margin-left: -160px;">
  <div class="add-edit-project-modal-header modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h4 class="modal-title">New Project</h4>
 </div>
 <div class="add-edit-project-modal-body modal-body">
    <form action="" id="add_project">
    <label>Name</label>
  </div>
  <div class="add-edit-project-modal-footer modal-footer">
    <input type="submit" id="submitButton" class="btn submit" value="Create">
    </form>
  </div>
</div>

在大约一个iPad的分辨率,模态的50%是关闭屏幕的左侧。

Answer 1:

你可以使用jQuery选择有问题的模式(S)和编辑CSS属性。 使用以下将模态设置为屏幕宽度和屏幕的位置时,其中心的90%:

$('#myModal').modal({
            backdrop: true,
            keyboard: true,
            show: false
        }).css({
            // make width 90% of screen
           'width': function () { 
               return ($(document).width() * .9) + 'px';  
           },
            // center model
           'margin-left': function () { 
               return -($(this).width() / 2); 
           }
    });

这将工作在页面加载时。 调整您的浏览器并刷新页面和模式,应在屏幕占用了90%的屏幕宽度居中。



文章来源: Twitter Bootstrap Modal Width issues