twitter-bootstrap 如何做模态引导出现在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34977785/
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
How to do Modal Bootstrap appear on bottom
提问by Gislef
How to set up the bootstrap for modal appear in the browser's bottom?
如何为模式设置引导程序出现在浏览器底部？
https://jsfiddle.net/9fg7jsu3/
https://jsfiddle.net/9fg7jsu3/
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<p>content</p>
</div>
</div>
</div>
I hope to have a result like this:
我希望有这样的结果：
Thanks for any help
谢谢你的帮助
回答by matvs
Something like that will do the work. Now you need to play with paddings, margins and width to adjust your modal;
像这样的事情会做的工作。现在您需要使用填充、边距和宽度来调整您的模态；
.modal {
position:fixed;
top:auto;
right:auto;
left:auto;
bottom:0;
}
https://jsfiddle.net/9fg7jsu3/1/
https://jsfiddle.net/9fg7jsu3/1/
EDIT: the right class is:
编辑：正确的类是：
.modal-dialog {
position:fixed;
top:auto;
right:auto;
left:auto;
bottom:0;
}
Otherwise the modal won't disappear, if you click above it.
否则模式不会消失，如果你点击它上面。
回答by Ivan Sisovic
This one worked for me
这个对我有用
.modal-dialog {
top: calc(100% - 300px);
}
