如何使引导模式垂直对齐:顶部

Question

我正在使用带有 Boostrap 3 补丁的引导模式来引导模式。在此补丁之后，模态很好。但是我需要将其垂直对齐顶部而不是中间。

Boostrap 3 补丁在 css 下方，这使得它出现在垂直中间，但我需要垂直顶部，请建议。

body.modal-open, 
.modal-open .navbar-fixed-top, 
.modal-open .navbar-fixed-bottom {
margin-right: 0;
}
.modal {
left: 50%;
bottom: auto;
right: auto;
z-index: 1050;
padding: 0;
width: 500px;
margin-left: -250px;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
}
.modal.container {
max-width: none;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
}

Answer 1

默认情况下，模态与 Bootstrap 3 中的顶部垂直对齐。 目前还不清楚您要用补丁完成什么。如果您想执行自定义操作，请先查看源代码。如果您还没有，可以在此处下载。这是您需要的文件的路径：bootstrap-3.3.7>更少>modals.less。

您的代码与 Bootstrap 3 源代码的结构不同。modals.less 文件顶部的注释非常简洁地说明了主要模态类的目的：

.modal-open - 用于杀死卷轴的身体类

.modal - 要在其中滚动的容器

.modal-dialog - 实际模态的定位外壳

.modal-content - 实际模态带 bg 和角落和狗屎

编辑：查看了您在评论中链接到的实时站点后，您在HTML中缺少一些实现.modal-dialogue和.modal-content样式规则的包装div标签。您的补丁似乎正在尝试补偿您省略的那些引导类。虽然在大多数情况下看起来不错，但它会导致您的模态显示不正确，并使它们的行为和定位更难调整和预测。

下面是一个简单的示例模式，显示了我从 Bootstrap 3 文档中复制的 HTML 结构：

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

如果删除模式补丁并按照上述代码中的模式进行操作，则应获得所需的结果。

希望这有帮助。祝你好运。