在 Bootstrap 中更改模态的宽度和高度

【问题标题】：Change width and height of the modal in Bootstrap在 Bootstrap 中更改模态的宽度和高度
【发布时间】：2016-04-04 18:42:11
【问题描述】：

我想在 Bootstrap 中更改模态框的宽度和高度。如何将模态的最大宽度设置为 900px？如何将模态的最大高度设置为屏幕高度减去填充：20px。

我使用了这个代码，

.modal-dialog {
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 40px);
}

但它不起作用。

它必须垂直和水平居中。

【问题讨论】：

标签： css modal-dialog

【解决方案1】：

由于模态窗口已经是positioned relative，你可以使用这个：

.modal-dialog {
  width: auto;
  height: auto;
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}

.modal-dialog .modal-content {
  height: 100%;
}

上面的 CSS 将使模态框位于fixed 位置，并使其从四个侧面看10px 的偏移量。

输出：http://output.jsbin.com/kepuximasi

【讨论】：

我可以使用 display:flex 吗？因为我需要它来占据空间
@JohnArellano 是的，无论如何。 :)