Question

我有一个模态，但它没有在较小的屏幕（平板电脑等）上调整大小。有没有办法让它响应？找不到有关bootstrap文档的任何信息。感谢

我更新了我的html代码:(它在django for循环中）

    <div class="modal fade " id="{{ p.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Producto</h4>
          </div>
          <div class="modal-body">
            <h5>Nombre : {{ p.name}}</h5>       
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>

          </div>

        </div>
      </div>
    </div>

我有这个css设置：

.modal-lg {
  max-width: 900px;}
@media (min-width: 768px) {
   .modal-lg {
    width: 100%;
  } 
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Answer 1

来自docs：

模态有两个可选尺寸，可通过修饰符类放在.modal-dialog上：modal-lg和modal-sm（截至3.1）。

此外，模式对话将在小屏幕上scale itself（截至3.1.1）。

Answer 2

我遇到了同样的问题，我通过在Modals.less下的较少版本中为@ screen-xs-min添加媒体查询来解决此问题

@media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
}

Answer 3

您应该可以使用.modal-dialog类选择器（结合media queries或您用于响应式设计的任何策略）调整宽度：

.modal-dialog {
    width: 400px;
}

Answer 4

老帖子。我最终设置了媒体查询，并为每个断点使用max-width: YYpx;和width:auto;。这也会对w / images进行缩放（例如，你在md屏幕上有一个宽度为740px的图像），模式将缩小到740px（不包括.modal-body的填充，如果应用的话）< / p>

<div class="modal fade" id="bs-button-info-modal" tabindex="-1" role="dialog" aria-labelledby="Button Information Modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

请注意，我使用的是SCSS，bootstrap 3.3.7，并且未对_modals.scss导入的_bootstrap.scss文件进行任何其他编辑。下面的CSS将添加到其他SCSS文件中，并在_bootstrap.scss之后导入。

同样重要的是要注意.modal-dialog的原始引导样式未设置为默认的992px断点，仅高达768px断点（应用了硬集宽度width: 600px;），因此，为什么我用width: auto;覆盖它。

@media (min-width: $screen-sm-min) { // this is the 768px breakpoint
    .modal-dialog {
        max-width: 600px;
        width: auto;
    }
}

@media (min-width: $screen-md-min) { // this is the 992px breakpoint
    .modal-dialog { 
        max-width: 800px;
    }
}

以下示例模式响应图像。

Answer 5

我遇到了同样的问题，找到一个简单的方法来解决该问题，那就是使模态中的所有物体都具有响应性（使用boostrap类），并且解决了我的问题。

Answer 6

Bootstrap 模式默认应该是响应式的。需要注意的是，如果您在 Modal 上设置了宽度。例如，我的模态中有一个高度为 40rem 的表单主体容器。如果您将宽度更改为 100%，它只会占用所需的空间，并且会再次响应。此示例指的是内联样式。

Bootstrap 3模态响应

6 个答案: