twitter-bootstrap Bootstrap 2 - 设置对话框/模式位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14228772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 2 - set dialog/modal position
提问by zcourts
I've found one way to do this:
我找到了一种方法来做到这一点：
use margins to control dialog position so margin: -335px 0 0 -280px;
使用边距来控制对话框位置margin: -335px 0 0 -280px；
setting the width you must reset the margins width: 900px; margin: -250px 0 0 -450px;
设置宽度必须重置边距 width: 900px; margin: -250px 0 0 -450px;
to set the height use max-height max-height: 800px;based on
设置高度使用 max-height max-height: 800px;基于
http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/
http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/
Is there a better way to do this? Using this or another approach, is there a way to only have the dialog slide down to top:0pxand stay there until dismissed?
有一个更好的方法吗？使用这种或另一种方法，有没有办法只让对话框向下滑动top:0px并停留在那里直到被关闭？
Using the first margin settings I mentioned does this but obviously as soon as the browser is resized it will get pushed out of view.
使用我提到的第一个边距设置可以做到这一点，但显然一旦浏览器调整大小，它就会被推出视图。
回答by Phil
Simply override the CSS position, eg
只需覆盖 CSS 位置，例如
.modal, .modal.fade.in {
top: 0; /* was 10% */
}
Note, this is with Bootstrap 2.2.2. The only margin is a negative left margin that is half the width of the modal (centres the modal horizontally). No top margins are required.
请注意，这是Bootstrap 2.2.2。唯一的边距是一个负的左边距，它是模态宽度的一半（将模态水平居中）。不需要上边距。
jsFiddle example here - http://jsfiddle.net/uuwAn/1/
jsFiddle 示例在这里 - http://jsfiddle.net/uuwAn/1/
回答by A.J.
You can modify the CSSat your end to archive this behavior.
您可以修改CSS最后以存档此行为。
.modal-body {
max-height: 350px;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-height: 450px), (max-height: 450px) {
.modal-body {
max-height: 130px;
}
}
Now its will work well on the mobile devices.
NOTE: done by using Media query of CSS.
现在它可以在移动设备上很好地工作。注意：通过使用媒体查询完成CSS。
