Twitter Bootstrap模态宽度问题 [英] Twitter Bootstrap Modal Width issues

问题描述

我的应用程式具有许多模态，全部具有不同的宽度。我知道您可以通过执行以下操作来设置模式内联的宽度：

My application features many modals, all with different widths. I understand you can set the width of a modal inline by doing something like:

width：400px
margin-left：-200px;

width: 400px margin-left: -200px;

这样做效果很好，但是如果你压缩窗口，它会触发屏幕的50％的模态，所以你不能看到一半的模态渲染在这些小分辨率下无用。关于iPad的分辨率，你可以看到这种情况。

This works great, however if you compress your window in it'll kick the modal 50% of the screen, so you cannot see half of the modal rendering it useless at these small resolutions. At about the resolution of an iPad you can see this happen.

现在的问题，如果在主bootstrap.css文件中设置模态的宽度，只有一个宽度工作完美。所以如果我设置宽度为400和margin-left -200，所有的模态将工作在这个宽度。但是，如果我继续前进并在一个模态上做内联CSS，并做例如：

Now on to the issue, if in the main bootstrap.css file you set the width of the modal, only that one width works perfect. So if I set the width as 400 and margin-left -200, all modals will work at this width. But if I go ahead and do inline CSS on a modal and do for instance:

width：900px
margin-left：-450px

width: 900px margin-left: -450px

如上所述，它会在较低的分辨率下突破。

It'll break at lower resolutions as described above.

我做错了什么？ Twitter Bootstrap只提供在所有分辨率下使一个模态宽度工作的能力？

What am I doing wrong? Does Twitter Bootstrap only offer the ability to make one modal width work at all resolutions?

我会包括屏幕截图，但是StackOverflow的管理员显然不允许我

I'd include screenshots, however the admins at StackOverflow apparently don't allow me to post these to help you guys.

这里是一个模式的例子，将打破较低的分辨率，因为做宽度内联：

Here's an example of one of the modals that will break at a lower resolutions because of doing the width inline:

<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％的模态在屏幕左侧。

At about the resolution of an iPad, 50% of the modal is off the screen to the left.

推荐答案

您可以使用jQuery选择有问题的模态并编辑其​​CSS属性。使用以下内容将模态设置为屏幕宽度的90％，并将其定位在屏幕中心：

You could use jQuery to select the modal(s) in question and edit their CSS attributes. Using the following would set the modal to 90% of screen width and position it center of the screen:

$('#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％。

This would work when the page loads. Resize you browser and refresh the page and the modal should be centered in the screen taking up 90% of screen width.

这篇关于Twitter Bootstrap模态宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！