如何将Bootstrap模态设置到右下角?

时间:2017-03-30 16:56:14

标签: html css twitter-bootstrap

我试图锁定窗口右下角的引导模式。

我拥有的是:

HTML

<div class="modal custom fade" id="trackModal" tabindex="-1" role="dialog" aria-labelledby="trackModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <h3 class="getlaid" id="trackModalLabel">Hello</h4>

            </div>

            <div class="modal-body">
            <p>TEST</p>
            </div>

            <div class="modal-footer">
                <div class="btnmodal" data-dismiss="modal">Close &#10006;</div>

            </div>
        </div>
    </div>
</div>

CSS

.modal.custom .modal-dialog {
    width:120%;
    position:fixed;
        bottom:0px;
        right:0px;
        margin:0px;

}

使用此代码块,我无法在窗口右下方显示模态,并且它会一直显示在页面中间。这有什么不对?

1 个答案:

答案 0 :(得分:0)

也许你打算用20%而不是120%?

.modal.custom .modal-dialog {
    width:20%;
    position:fixed;
    bottom:0;
    right:0;
    margin:0;
}

http://www.codeply.com/go/6GXNLGHyoW