将引导模式锁定到右下角？

Question

我想将 Bootstrap 3 模态锁定到窗口的右下角，如下所示：

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

先感谢您。

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

原文由 Ivan Vegner 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 ryantdecker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

链接中的基本概念似乎确实有效。这是一个小提琴： https ://jsfiddle.net/d0nfh6kz/

 #myModal1 {
  top:70%;
  left:27%;
  outline: none;
}

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal1" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

原文由 bvoleti 发布，翻译遵循 CC BY-SA 3.0 许可协议