我的应用程序具有许多模态,所有模式都具有不同的宽度。我知道您可以通过执行以下操作来设置模态内联的宽度:
宽度: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%的模态在屏幕左侧。
答案 0 :(得分: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%。