Question

过去几个小时我一直在使用bootstrap模式，我遇到了一些麻烦。我搜遍了整个地方，但找不到有类似问题的人。

我的模态看起来像这样

<!-- 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;
}

Answer 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;
}

Answer 2

也许放弃顶部：10px可能在容器的css中起作用。

Bootstrap模式推送内容

2 个答案: