Bootstrap模态响应垂直中心？ [英] Bootstrap modal responsive vertical centering?

问题描述

如何垂直地集中引导模式？我在这里寻找解决方案，但他们没有反应，或只是不工作。我使用Bootsrap 3。

How can I vertically centerise the bootstrap modal? I have looked around for a solution here but they are not responsive, or just not working at all. I am using Bootsrap 3.

模态不再响应更小的屏幕，或当您使用下面的解决方案后调整浏览器窗口的大小。

The modal is not responsive anymore to a smaller screen or when you resize the browser window after using the solution below.

jquery，

$('.modal').on('shown.bs.modal', function() {
            $(this).find('.modal-dialog').css({
                'margin-top': function () {
                    return -($(this).outerHeight() / 2);
                },
                'margin-left': function () {
                    return -($(this).outerWidth() / 2);
                }
            });
        });

css，

.modal-dialog {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
    }

bootstrap，

bootstrap,

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog custom-class">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">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>
  </div>
</div>

有什么想法吗？

编辑：

我试过这个css，

@media screen and (min-width: 768px) {
        .custom-class {
            width: 800px; /* either % (e.g. 60%) or px (400px) */
            top: 25%;
        }
    }

模态只是回到默认位置

也可以， top：25％;

推荐答案

使用CSS，我们可以将Bootstrap模态放在垂直中心。

Using css we can place Bootstrap modal at vertical center.

    .modal {
        text-align: center;
        padding: 0!important;
    }

    .modal:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin: -2px;
        height: 100%;
    }

    .modal-dialog {
        display: inline-block;
        vertical-align: middle;
    }

这篇关于Bootstrap模态响应垂直中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！