引导模式向上推送内容答案

【问题标题】：Bootstrap modal pushing content up引导模式向上推送内容
【发布时间】：2016-04-22 13:49:34
【问题描述】：

过去几个小时我一直在使用引导模式，但遇到了一些麻烦。我到处搜索，但找不到有类似问题的人。

我的模态看起来像这样

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
                <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>

一切正常，模式本身也正常工作，但每当我点击按钮时，包含的 div 就会忽略它的 margin-top 并转到页面顶部。我希望这是我所做的愚蠢的事情。

编辑：这是我用于此页面的 CSS。我忘了提到上面的模式是在一个带有数据表的页面上，它们一起是另一个页面的 iframe。在我点击打开模态框后，包含 iframe 的 div 也会转到页面顶部。

.container{
  position: relative;
  top: 10px;
  height: 100%;
}

a, a:hover {
  color: #6a6e4d;
  text-decoration: none;
  font-weight: bold;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover,
.pagination>.active>span:hover, .pagination>.active>a:focus,
.pagination>.active>span:focus {
  background-color: #6a6e4d;
  border-color: #6a6e4d;
}

【问题讨论】：

要么粘贴整个 html 文件，要么制作一个小提琴。从这里看不到任何东西......
@Jesse 看看你的 css 兄弟，你的代码是不完整的

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

首先，我不能从上面的代码中理解那么多。我认为您的模式弹出窗口忽略了 margin-top css 规则。将下面的 css 添加到您的页面中并更改 padding-top 参数。

@media screen and (min-width: 768px)
.modal-dialog {
  right: auto;
  left: 50%;
  width: 600px;
  padding-top: 130px;
  padding-bottom: 30px;
}

【讨论】：

【解决方案2】：

也许删除 top:10px 可能在容器的 css 中起作用。

【讨论】：