Question

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

我使用了这段代码，

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

但它没有用。

必须垂直和水平居中。

Answer 1

由于模态窗口已经position编辑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

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

1 个答案: