Bootstrap 6 容器查询：.contains-inline 与 .contains-size

Bootstrap 6 新增容器查询工具类，组件能按父容器宽度响应，而不是按视口。本文说明两个类的作用、@container 写法，以及和媒体查询、5.3 的区别。

一句话结论

Bootstrap 6 提供了两个容器类型工具类：.contains-inline 和 .contains-size。加在父元素上，父元素就成为「查询容器」，子元素可以用 @container 按容器尺寸而不是窗口尺寸改写样式。

两个类分别做什么

类名	生成的 CSS	适用场景
`.contains-inline`	`container-type: inline-size`	只关心宽度（水平书写模式下就是宽），最常用
`.contains-size`	`container-type: size`	宽高都要查询，元素自身尺寸必须确定

最小示例

<div class="contains-inline">
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">容器查询卡片</h3>
      <p class="card-text">容器变宽时，这段内容会切换成两列。</p>
    </div>
  </div>
</div>

.card-body {
  display: grid;
  gap: 1rem;
}

@container (min-width: 30rem) {
  .card-body {
    grid-template-columns: 1fr 1fr;
  }
}

容器是 .contains-inline 那一层，判断条件是它的宽度。把同一段卡片放进侧边栏和放进主内容区，宽的那一份自动变成两列，窄的那一份保持单列——不需要为两种位置各写一套媒体查询。

和媒体查询的区别

	媒体查询 `@media`	容器查询 `@container`
依据	视口宽度	最近的查询容器宽度
复用	同一组件在不同容器里表现相同	组件适配所在容器，随便搬
5.3 是否支持	支持，断点工具类就是它	不支持，只能靠 `@media`

:md-* / md:col-6 这些前缀依然是视口断点，没有变成容器断点。要按容器响应，得自己写 @container 规则。

常见坑

容器查询的样式必须写在 @container 里，普通 CSS 不会自动生效。
用了 .contains-size 的元素高度需要明确（否则 size 类型会按内容塌陷），宽度场景一律优先 .contains-inline。
容器只对后代元素生效，给容器自身写 @container 规则不会命中自己。
查询的是「最近的」查询容器，中间再套一层 .contains-inline 会改变匹配目标。

对应文档页

容器查询工具类文档 →