Bootstrap modal的margin-top答案

【问题标题】：Margin-top of Bootstrap modalBootstrap modal的margin-top
【发布时间】：2017-03-03 04:15:27
【问题描述】：

我在我的网站上添加了 Bootstrap 模态框，但我注意到模态框和屏幕顶部之间的空间大于模态框和屏幕底部之间的空间。

我已将style="margin-top:0;padding-top:0" 添加到每个div 标记中，但没有效果。

目的是减少模态框和屏幕顶部之间的间隙。

【问题讨论】：

如果您能提供一个在线示例，那就太好了。
很遗憾，我没有任何地方可以上传整个内容，但这里是屏幕上的模态屏幕截图：i.imgur.com/mVOw8bh.png
如果你能提供a Minimal, Complete, and Verifiable example。
那是由于多种原因。首先，默认模式使用固定定位，因此您必须使用top 和bottom css 属性来调整您的喜好。其次，BS3+ modals 设置为溢出屏幕，因此如果内容长于窗口高度，您可以滚动。如果您想要一个完美居中的模态，每次都必须确保另一个容器（即 div）设置为像 BS2 及其 .modal-body 中一样滚动。

【解决方案1】：

我只是使用以下 CSS 完成的：

.modal-dialog {
    margin: 20vh auto 0px auto
}

使用 vh 单位使其更“响应”。

另外，您可能对this post 感兴趣。

【讨论】：

【解决方案2】：

在我的 CSS 中使用 top 和 bottom 效果很好。我修改了modal类，添加了top:10px。

【讨论】：