Question

我使用的是默认的bootstrap3 css文件。

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

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

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

BootstrapTable.prototype.refresh = function (params) {
    if (params && params.url) {
        this.options.url = params.url;
        this.options.pageNumber = 1;
    }
    this.initServer(params && params.silent, params && params.query);
};

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

我尝试过设置

<style>
    .modal-dialog { width: 1000px; }
</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;
  }
}

Answer 2

您应该只需将以下CSS属性添加到date - name - val 16/02 - Rossi - 5 16/02 - Zingaro - 8 18/02 - Beniamino - 4 18/02 - Bosso - 2元素即可。

16/02
Rossi - 5
Zingaro - 8
18/02
Beniamino - 4
Bosso - 2

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

Answer 3

使用此

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

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

3 个答案: