Bootstrap 5 断点与响应式栅格详解

Bootstrap 5 有六个响应式层级：超小（小于 576px）、sm（576px 及以上）、md（768px）、lg（992px）、xl（1200px）和 xxl（1400px）。所有响应式类都使用这些名称，所以 col-md-6 的意思是“从 768px 起占一半宽度”，d-lg-none 的意思是“从 992px 起隐藏”。和 Tailwind 一样，Bootstrap 采用移动优先：不带断点的类作用于所有尺寸，带断点的类从该宽度起生效。

Bootstrap 5 断点与容器宽度

以上是 Bootstrap 官方断点文档中的默认值。.container-fluid 始终占满宽度；.container-md（以及其他中缀）在达到对应断点前占满宽度，之后变为固定宽度。

响应式栅格实战

Bootstrap 栅格共 12 列。你需要为每个断点指定元素占几列：

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

效果是：手机上每行一张卡片，768px 起每行两张，992px 起每行三张。col-12 可以省略，因为 row 中未指定尺寸的列本来就会撑满，但写上能让意图更清楚。

如果是等宽元素组成的栅格，用 row columns 更简洁：

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

在某个断点调整内容顺序，可以用 order 类，例如 order-first order-md-0。当图片在手机上需要排在标题下方、在桌面端放在标题旁边时，这很有用。

最常用的响应式工具类

• 显示：d-none d-md-block 在手机上隐藏，768px 起显示；d-lg-none 从 992px 起隐藏。
• Flex 方向：flex-column flex-md-row 在手机上纵向堆叠，从 md 起横向排列。
• 间距：p-3 p-lg-5 在小屏上使用较小的内边距。
• 文本对齐：text-center text-md-start。
• 导航栏：navbar-expand-lg 从 992px 起显示完整菜单，以下显示汉堡按钮。
• 表格：用 .table-responsive 包裹宽表格，让它在自身容器内横向滚动。
• 图片：.img-fluid 会设置 max-width: 100% 和 height: auto。

Sass 中的媒体查询混入

如果你通过 Sass 编译 Bootstrap，请使用它的混入，而不是写死像素值：

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* 小于 768px */ }
@include media-breakpoint-between(md, xl) { /* 768px 到 1199.98px */ }
@include media-breakpoint-only(md) { /* 768px 到 991.98px */ }

注意 Bootstrap 5 中 media-breakpoint-down(md) 的含义：它匹配小于 md 断点的宽度，编译结果为 max-width: 767.98px。.98 用于避免高分屏上出现小数宽度时范围重叠。Bootstrap 4 中同一个混入使用的是下一个断点，升级时很多人会在这里踩坑。

自定义 Bootstrap 断点

在导入 Bootstrap 之前修改 Sass 映射：

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

键必须按升序排列，并保留 xs: 0。到底要不要改？只有当设计确实有理由时才改。如何根据内容而不是设备列表来选择宽度，见响应式断点指南。

Bootstrap 响应式常见错误

• 在手机上用 col-6。 在 360px 宽的屏幕上分两列，扣除间距后每列只剩约 160px，文字和按钮基本放不下。
• 忽略导航栏断点。 菜单项较多的导航栏如果用 navbar-expand-md，在 768px 到 992px 之间可能会溢出。
• 在移动端用 d-none 隐藏内容，而不是重新排列。Google 索引的是页面的移动版本。
• 自定义媒体查询的数值与 Bootstrap 不一致，导致组件在 768px 切换，而你的 CSS 在 760px 切换。

如何测试 Bootstrap 布局

在每个层级的精确宽度和少 1px 的宽度各检查一次：575/576、767/768、991/992、1199/1200 和 1399/1400。在 Chrome DevTools 中，设备工具栏的 Show media queries 选项会把断点显示为可点击的色条。

然后用具体机型的 User Agent 和像素比检查页面，Mobile View Extension 一键即可完成。完整流程见如何测试响应式设计。

常见问题

Bootstrap 5 的断点有哪些？

576px（sm）、768px（md）、992px（lg）、1200px（xl）和 1400px（xxl），576px 以下还有一个未命名的超小层级。

Bootstrap 中的 col-md-6 是什么意思？

从 md 断点（768px）起，元素占 12 列中的 6 列，也就是一行的一半。小于 768px 时，除非有其他类另行指定，否则占满整行。

Bootstrap 是移动优先的吗？

是的。不带断点的类作用于所有屏幕尺寸，带断点的类从对应宽度起覆盖它们。