Twitter Bootstrap模态宽度问题

Question

我的应用程序有许多模态,都有不同的宽度.我知道您可以通过执行以下操作来设置模态内联的宽度:

宽度:400px margin-left:-200px;

这样做效果很好,但是如果你压缩你的窗口,它会踢出50%的模态,因此你无法看到一半的模态渲染它在这些小分辨率下无用.在大约iPad的分辨率下你可以看到这种情况发生.

现在问题,如果在主bootstrap.css文件中设置模态的宽度,只有一个宽度完美.因此,如果我将宽度设置为400并且将边距设置为-200,则所有模态都将以此宽度工作.但是,如果我继续在模态上进行内联CSS并执行以下操作:

宽度:900px margin-left:-450px

如上所述,它将以较低的分辨率打破.

我究竟做错了什么？Twitter Bootstrap是否只提供使一个模态宽度适用于所有分辨率的功能？

我会包含截图,但是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选择有问题的模态并编辑其​​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%.