3

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

宽度：400px 左边距：-200px；

这很好用，但是如果您在其中压缩窗口，它将踢出 50% 的屏幕模式，因此您看不到一半的模式渲染它在这些小分辨率下无用。在大约 iPad 的分辨率下，您可以看到这种情况发生。

现在讨论这个问题，如果您在主 bootstrap.css 文件中设置了模态框的宽度，那么只有一个宽度可以完美运行。因此，如果我将宽度设置为 400，margin-left -200，则所有模态都将在此宽度下工作。但是，如果我继续在模式上执行内联 CSS 并执行以下操作：

宽度：900px 左边距：-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% 的模态显示在屏幕左侧。

4

1 回答 1

5

您可以使用 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%。

于 2013-03-01T17:08:31.703 回答