如何在模式引导对话框中使用网格？

Question

我正在尝试在modal弹出窗口中使用bootstrap-5网格系统。 为了测试，我只是从https://getbootstrap.com/docs/5.0/components/modal/中获取了主要的模态示例，并在modal-body中添加了网格示例：

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
  ....

结果：网格不受任何尊重。 但为什么？

https://jsfiddle.net/3041fLwk/

Answer 1

我认为您的问题来自您使用ms-auto - 当我删除所有ms-auto类时，网格按预期工作。

Answer 2

问题是引导程序没有在模态上实现响应。 它依赖父 window 进行media查询。 如果您创建一个宽度有限的小盒子，也是如此。

要在模态上实现响应是使用iframe ，或者必须自己在模态上设置断点