Bootstrap5如何实现div内元素基于容器宽度而非窗口宽度响应式

Bootstrap 5默认响应式断点基于浏览器视口的媒体查询实现，这是预览区调整宽度时内部元素不触发响应式的核心原因，两类需求均有成熟可落地的实现方案：

完全可以让div作为响应式规则的参考容器，通过CSS容器查询特性即可实现，Bootstrap 5.2+已原生适配该能力，改造成本极低：

1. 首先给预览区div添加容器上下文，写入如下样式：

   /* 替换为你的预览区容器实际选择器 */
   .editor-preview {
     container-type: inline-size;
     container-name: preview; /* 可选，用于指定响应规则匹配的容器 */
   }
   

2. 将原有基于视口的Bootstrap响应式类，替换为同断点的容器查询版本即可：
   • 原视口断点类前缀：sm-/md-/lg-/xl-/xxl-（例如navbar-expand-lg、col-md-6）
   • 容器查询类前缀：cq-sm-/cq-md-/cq-lg-/cq-xl-/cq-xxl-（对应替换为navbar-expand-cq-lg、col-cq-md-6）
     替换后所有响应式规则会自动以最近的上层标记了container-type的容器宽度为判断依据，和容器实际尺寸完全同步，与浏览器视口宽度无关。
3. 如果是自定义响应式样式，把原来写在@media (min-width: 992px)这类媒体查询里的规则，迁移到@container preview (min-width: 992px)下即可生效。

注：如果使用的Bootstrap版本低于5.2，可升级版本或手动基于@container规则生成对应工具类。如果需要兼容Chrome 105以下、Firefox 110以下不支持CSS容器查询的浏览器，且不想使用iframe，可通过ResizeObserver监听预览容器宽度变化，动态给容器内根节点添加对应断点的自定义类（如.bp-lg）手动匹配响应式规则，但该方案需要覆盖所有用到的Bootstrap响应式类，维护成本较高，不推荐优先使用。

如果不想修改现有业务代码的响应式类，或者需要更强的样式隔离，可选择以下替代容器：

• iframe 方案（兼容性最好、行业通用）
  iframe本身是独立的浏览上下文，内部所有CSS媒体查询、JavaScript视口相关API默认都以iframe自身的尺寸为参考，完全不需要修改任何现有Bootstrap代码，只要动态修改iframe的width/height属性，内部页面的响应式规则会自动触发，和真实浏览器窗口行为完全一致。
  额外优势是天然具备样式隔离能力，预览内容的CSS不会污染编辑器本身的UI，是目前市面上绝大多数可视化建站编辑器的首选预览方案，使用时只需要给iframe设置border: 0，和预览区边框对齐即可。
• Shadow DOM 容器
  给预览区挂载Shadow DOM后，配合上述的CSS容器查询属性，可以实现样式隔离+容器级响应式，但本质响应式逻辑还是依赖容器查询，且兼容性略逊于iframe，适合对预览区加载性能要求极高的场景。

问题复现示例：

内容的提问来源于stack exchange，提问作者Depicted