Question

我正在使用带有Boostrap 3补丁程序的引导程序模式进行引导程序模式。此修补程序后的Modal很好。但是我需要将其垂直对齐，而不是居中对齐。

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中的顶部垂直对齐。目前尚不清楚您要使用补丁完成什么。如果您想进行自定义操作，请先查看源代码。如果还没有，可以下载here。这是您所需文件的路径：bootstrap-3.3.7> less> modals.less。

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

// .modal-open-用于杀死滚动条的主体类

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

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

// .modal-content-实际的模态，带有bg，角落和大便

编辑：查看了在注释中链接到的实时网站后，您在HTML中缺少一些包装div标签，这些标签实现了.modal-dialogue和.modal-content样式规则。看来您的补丁程序正在尝试补偿那些您已省略的Bootstrap类。尽管在大多数情况下看起来还可以，但是这会导致模态显示不正确，并使它们的行为和位置更加难以调整和预测。

这是一个简单的示例模式，显示了如何构造我从Bootstrap 3 documentation复制的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>

如果删除模态补丁并按照上面的代码中的模式进行操作，则应获得预期的结果。

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

如何使引导程序模态化为垂直对齐：顶部

1 个答案: