断点 · Bootstrap 6.0 中文文档

核心概念

断点是响应式设计的构建基础。你可以用它们控制布局在特定视口或设备尺寸下何时进行调整。
用媒体查询按断点来组织 CSS。媒体查询是 CSS 的一项特性，可以让你根据一组浏览器和操作系统参数有条件地应用样式。我们在媒体查询中最常用的是 min-width。
以移动优先实现响应式设计是目标。Bootstrap 的 CSS 先只应用让布局在最小断点下可用所需的最少样式，再叠加样式使设计适应更大的设备。这样能精简 CSS、加快渲染，并为访客提供良好的体验。

可用的断点

Bootstrap 内置六个默认断点（有时称为网格层级）用于构建响应式布局。如果你使用源码中的 Sass 文件，可以自定义这些断点。

断点	类名中缀	尺寸
超小	无	<576px
小	`sm`	≥576px
中	`md`	≥768px
大	`lg`	≥1024px
超大	`xl`	≥1280px
特大	`2xl`	≥1536px

每个断点的选择都考虑到了能舒适容纳宽度为 12 的倍数的容器。这些断点也代表了常见设备尺寸和视口尺寸的一个子集——它们并不专门覆盖所有用例或设备。相反，这些范围提供了一个强大而一致的基础，几乎适用于任何设备。

这些断点可以通过 Sass 自定义——你可以在 _config.scss 样式表的 Sass map 中找到它们。

scss/_config.scss

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px
);

关于如何修改 Sass map 和变量的更多信息与示例，请参阅网格文档的 CSS 部分。

媒体查询

由于 Bootstrap 采用移动优先的开发方式，我们使用若干媒体查询为布局和界面创建合理的断点。这些断点主要基于最小视口宽度，允许我们随着视口变化逐步放大元素。

最小宽度

Bootstrap 在源码 Sass 文件中主要使用以下媒体查询范围（即断点），用于布局、网格系统和组件。

SCSS

          // Source mixins

// No media query necessary for xs breakpoint as it’s effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(2xl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

这些 Sass mixin 会在编译后的 CSS 中使用 Sass 变量里声明的值。例如：

SCSS

          // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (width >= 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (width >= 768px) { ... }

// Large devices (desktops, 1024px and up)
@media (width >= 1024px) { ... }

// X-Large devices (large desktops, 1280px and up)
@media (width >= 1280px) { ... }

// XX-Large devices (larger desktops, 1536px and up)
@media (width >= 1536px) { ... }

最大宽度

我们偶尔也会使用方向相反的媒体查询（针对给定屏幕尺寸及更小的情况）：

SCSS

          // No media query necessary for xs breakpoint as it’s effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(2xl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

这些 mixin 使用断点值，通过现代范围语法创建 max-width 媒体查询。例如：

SCSS

          // `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (width < 576px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (width < 768px) { ... }

// `lg` applies to medium devices (tablets, less than 1024px)
@media (width < 1024px) { ... }

// `xl` applies to large devices (desktops, less than 1280px)
@media (width < 1280px) { ... }

// `2xl` applies to x-large devices (large desktops, less than 1536px)
@media (width < 1536px) { ... }

单个断点

此外还有针对单个屏幕尺寸区间的媒体查询和 mixin，使用断点的最小值和最大值宽度。

SCSS

          @include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(2xl) { ... }

例如，@include media-breakpoint-only(md) { ... } 会生成：

SCSS

          @media (width >= 768px) and (width < 1024px) { ... }

断点之间

类似地，媒体查询也可以跨越多个断点宽度：

SCSS

          @include media-breakpoint-between(md, xl) { ... }

生成结果为：

SCSS

          // Example
// Apply styles starting from medium devices and up to extra large devices
@media (width >= 768px) and (width < 1280px) { ... }

容器查询

除了基于视口的媒体查询，Bootstrap 对某些组件还使用了容器查询。容器查询允许元素响应父元素的大小而不是视口大小，从而实现更灵活、更模块化的响应式行为。

容器查询使用与视口媒体查询相同的断点值。

在 Bootstrap 中的用法

以下组件使用了容器查询：

导航栏 —— 使用容器查询实现其响应式展开行为。.navbar 元素被设置为查询容器，.*:navbar-expand 类使用 @container 查询而不是 @media 查询。这意味着导航栏响应的是自身宽度而非视口宽度，在放入不同布局环境时（例如侧边栏或受限容器内）适应性更强。
步骤条 —— .stepper-overflow 容器使用 container-type: inline-size 为水平滚动的步骤条模式建立包含上下文。
列表组 —— .*:list-group-horizontal 类使用 @container 查询，因此列表组会根据其查询容器的宽度而不是视口，在垂直和水平布局之间切换。
卡片 —— .card-group 布局使用 @container 查询，根据查询容器的宽度而不是视口，把卡片等宽排列成列。

下面是导航栏实现容器查询的方式：

SCSS

          // The navbar is defined as a query container
.navbar {
  container-type: inline-size;
}

// Responsive classes use container queries
.lg\:navbar-expand {
  @container (min-width: 1024px) {
    // Expanded navbar styles...
  }
}

设置容器

使用 set-container() mixin 将元素设置为查询容器：

SCSS

          // Default: inline-size containment
.my-component {
  @include set-container();
  // Output: container-type: inline-size;
}

// With explicit type
.my-component {
  @include set-container(size);
  // Output: container-type: size;
}

// With a name (uses shorthand property)
.my-component {
  @include set-container(inline-size, sidebar);
  // Output: container: sidebar / inline-size;
}

容器查询 mixin

与用于基于视口的媒体查询的 media-breakpoint-* mixin 类似，Bootstrap 提供了使用相同断点值和范围语法的容器查询 mixin。

最小宽度

使用 container-breakpoint-up() 在容器宽度至少达到给定断点时应用样式：

SCSS

          .my-component {
  @include set-container();
}

.my-component-child {
  // …

  @include container-breakpoint-up(md) {
    // Styles for when container is at least 768px wide
  }

  @include container-breakpoint-up(lg) {
    // Styles for when container is at least 1024px wide
  }
}

这些 mixin 使用与媒体查询相同的现代范围语法。例如：

SCSS

          @container (width >= 768px) { ... }
@container (width >= 1024px) { ... }

最大宽度

使用 container-breakpoint-down() 在容器宽度小于给定断点时应用样式：

SCSS

          // Sass usage
@include container-breakpoint-down(lg) { ... }

// Compiled CSS
@container (width < 1024px) { ... }

单个断点

使用 container-breakpoint-only() 针对单个断点范围：

SCSS

          // Sass usage
@include container-breakpoint-only(md) { ... }

// Compiled CSS
@container (width >= 768px) and (width < 1024px) { ... }

断点之间

使用 container-breakpoint-between() 跨越多个断点宽度：

SCSS

          // Sass usage
@include container-breakpoint-between(md, xl) { ... }

// Compiled CSS
@container (width >= 768px) and (width < 1280px) { ... }

命名容器

所有容器查询 mixin 都接受一个可选的容器名称参数，用于查询特定的祖先容器。当你有多层嵌套容器时，这会很有用：

SCSS

          .sidebar {
  @include set-container(inline-size, sidebar);
}

.main-content {
  @include set-container(inline-size, main);
}

// Query the sidebar container specifically, even if nested inside main
.widget {
  @include container-breakpoint-up(md, sidebar) {
    // …
  }
}

编译后的输出会包含容器名称：

SCSS

          @container sidebar (width >= 768px) { ... }