使模态对话框固定宽度，但是当屏幕重新调整尺寸小于它时，它必须重新调整大小响应答案

【问题标题】：Make modal-dialog fixed width but when screen re-sizes smaller then it, it must re-size responsive使模态对话框固定宽度，但是当屏幕重新调整尺寸小于它时，它必须重新调整大小响应
【发布时间】：2016-02-16 09:46:35
【问题描述】：

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

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

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

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

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

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

我试过设置

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

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

我尝试了other stackoverflow question 中的答案组合，该other stackoverflow question 处理设置模态对话框宽度，但无法获得有效的解决方案。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只需使用@media 规则

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

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

【讨论】：

我进入了默认的 boostrap css 并找到了一个 modal-lg 的例子。谢谢

【解决方案2】：

您应该能够通过简单地将以下 CSS 属性添加到您的 .modal-dialog 元素来做到这一点。

width: 100%;
max-width:1000px;

这将使模态框成为屏幕的全宽，直到达到 1000 像素，此时随着屏幕变宽，它将保持在 1000 像素。

【讨论】：

【解决方案3】：

使用这个

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

【讨论】：