如何做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

在<div class="modal-dialog" ...使用这个时，

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

Answer 2

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

.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/