锁定自举模式到右下角？

Question

我想将Bootstrap 3模式锁定到窗口的右下角,如下所示:

我试图使用top: x%; left: x%CSS 移动它,但这完全打破了响应.无论窗口大小如何,如何将其锁定在窗口的右下角？

先感谢您.

JSFiddle:http://jsfiddle.net/eqhdqsyp/6

Answer 1

如果你想将它相对于窗口定位,你想要position:fixed;并且如果你希望它在屏幕左侧和顶部调整时保持正确和底部固定不起作用,正如您已经注意到的那样使用right而bottom不是.

Bootstrap已经像这样设计了这个div:

@media (min-width: 768px)
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

所以你需要用这个来覆盖它:

.modal.in .modal-dialog {
    position:fixed;
    bottom:0px;
    right:0px;
    margin:0px;
}

http://codepen.io/ryantdecker/pen/ZOpQOX