bootstrap 5.3 不支持原生容器查询，其响应式系统仅基于视口断点，所有 .col-* 类均依赖 @media 而非 @container，需手动设置 container-type 并用原生 css 实现容器查询。
Bootstrap 5.3 不支持原生容器查询（container queries）
直接说结论：Bootstrap 5.3 本身**没有实现容器查询**，它的响应式系统完全基于视口断点（xs、md、xl 等），而非元素自身宽度。这意味着你无法用 .col-container-md-6 这类类名去响应父容器尺寸变化——这类写法根本不存在，也不会生效。
为什么不能直接用 container-query 类？
因为 Bootstrap 的 Sass 编译逻辑只生成视口媒体查询（@media (min-width: 768px)），不生成 @container 规则。即使你在 HTML 中写了 container-type: inline-size，Bootstrap 的 .col-* 类也不会监听或响应它。
- 所有
.col-*、.g-*、.d-*类都依赖@media，不是@container -
container-type属性需手动添加到目标容器上，Bootstrap 不自动加 - 目前只有 Chrome 117+、Firefox 119+、Safari 16.4+ 支持
@container，IE 和旧版 Edge 完全不支持
如何在 Bootstrap 项目里真正用上容器查询？
得绕过 Bootstrap 的栅格类，用纯 CSS 自定义规则，并确保容器具备查询能力。关键三步：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给目标容器显式设置
container-type: inline-size（推荐加container-name: section方便定位） - 用原生
@container规则写样式，比如：@container section (min-width: 400px) { .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); } } @container section (min-width: 600px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } - 把 Bootstrap 的工具类（如
text-center、mb-3）保留用于微调，但不要指望它们响应容器尺寸
注意：别把 .row 或 .container 当作容器查询目标——它们默认没有 container-type，且内部 flex 布局会干扰 @container 计算。最好另起一层干净的 <div class="section-container">。
<h3>容易踩的坑：混用导致布局断裂</h3>
<p>最常见错误是试图让 <code>.col-md-6 和 @container 共存。结果往往是：
- 视口断点生效，容器查询失效（因为
.col-md-6强制 flex basis，覆盖了 grid 行为） - Chrome DevTools 显示 “
container query not supported in this context”，其实是父容器没设container-type - 移动端下容器宽度不足 400px，但
@container (min-width: 400px)规则仍被应用（浏览器误判容器尺寸）
真正可靠的方案，是把容器查询当作独立布局层，Bootstrap 只负责 typography、spacing、buttons 等原子样式，别让它管列数和换行逻辑。
