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

Question

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

我使用了这段代码，

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

但它不起作用。

它必须垂直和水平居中。

Answer 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 将使模态框处于固定位置，并使其从四边偏移10px。

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