如何做Modal Bootstrap出现在底部

Question

如何设置modal的bootstrap出现在浏览器的底部？

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">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
            <p>content</p>
        </div>
      </div>
    </div>

我希望得到这样的结果：

感谢您的帮助

Answer 1

这样的事情会起作用。 现在你需要使用填充，边距和宽度来调整你的模态;

.modal {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}

https://jsfiddle.net/9fg7jsu3/1/

编辑：正确的课程是：

.modal-dialog {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}  

否则模态不会消失，如果你点击它上面。

https://jsfiddle.net/9fg7jsu3/2/

Answer 2

这个对我有用

.modal-dialog {
  top: calc(100% - 300px); 
}

Answer 3

在<div class="modal-dialog" ...上使用它，

<div class="modal-dialog modal-dialog-centered" style="align-items: flex-end;">
    ...
</div>