容器查询 · Bootstrap 6.0 中文文档

类名	样式
.contains-inline	container-type: inline-size;
.contains-size	container-type: size;

使用 .contains-* 工具来设置 container-type 属性，将一个元素设为查询容器。一旦元素成为查询容器，其子孙元素就可以根据容器的大小而不是视口来调整样式。

将 .contains-inline 应用于查询内联尺寸（水平书写模式下的宽度），或将 .contains-size 应用于同时查询内联和块尺寸。

HTML

          <div class="contains-inline">
  <div class="card">...</div>
</div>

SCSS

          // Classes
.contains-inline {
  container-type: inline-size;
}
.contains-size {
  container-type: size;
}

.contains-size 同样会查询容器的块尺寸，因此该元素必须有一个明确的高度，以便 size 的包含能够解决。如有疑问，请使用 .contains-inline。

几个组件依赖查询容器来实现其响应式布局。例如，将.card-group或水平.list-group包裹在具有.contains-inline的元素中，以便其基于容器查询的布局生效。

CSS

容器工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

"container": (
  property: container-type,
  class: contains,
  values: (
    "inline": inline-size,
    "size": size,
  )
),