css - 使模态对话框的宽度固定，但是当屏幕尺寸比它小时，它必须重新调整尺寸响应

Question

我正在使用默认的 bootstrap3 css 文件。

我注意到模态对话框的默认 css 宽度是 600px。

但是我需要屏幕的宽度为 1000px。

如果屏幕大于 1000px，模态宽度仍需为 1000px。

<style>
    .modal-dialog { width: 1000px; }
</style>

这工作正常，但是如果我将窗口调整为小于 1000 像素，则对话框需要根据窗口宽度响应地调整大小，例如与窗口宽度相同。当您调整大于 1000 像素的窗口大小时，它必须保持 1000 像素的相同宽度。

我试过设置

<style>
    .modal-dialog { width: auto; }
</style>

但行为与默认的 boostrap 匹配，并且大小仍然是默认的 600px，如果您将其调整为小于 600px，它是自适应的。我基本上想要与默认 Bootstrap css 相同的行为，但大小为 1000px；

我尝试了 other stackoverflow question 中的答案组合它处理设置模式对话框宽度但无法获得工作解决方案。

Answer 1

只需使用@media规则

@media 规则用于为不同的媒体类型/设备定义不同的样式规则。

@media (min-width: 1000px)/* The minimum width of the display area, such as a browser window*/
{
  .modal-dialog {
      width: 1000px;
  }
}