分辨率 / Breakpoints
响应式工具类采用移动优先规则。基础类在所有宽度生效，加入 sm/md/lg/xl/xxl 中缀后，从对应最小宽度开始覆盖基础值。各工具族的类名表会把这些尺寸变体汇总为 {breakpoint}，不再逐条重复展示。
基础用法
调整浏览器宽度，下面只会显示当前所在的一个区间：
xs · 0–599.98pxsm · 600–959.98pxmd · 960–1279.98pxlg · 1280–1919.98pxxl · 1920–2559.98pxxxl · ≥2560px
断点范围
| 层级 | 当前区间 | 响应式中缀的生效范围 |
|---|---|---|
基础 / xs | 0–599.98px | 无中缀，所有宽度 |
sm | 600–959.98px | ≥600px |
md | 960–1279.98px | ≥960px |
lg | 1280–1919.98px | ≥1280px |
xl | 1920–2559.98px | ≥1920px |
xxl | ≥2560px | ≥2560px |
例如 float-md-right 的声明虽然仍是 float: right，但只从 960px 开始生效；这就是它与 float-right 的区别。
汇总写法
{breakpoint} 可以替换为 sm、md、lg、xl 或 xxl。目录只展示下列模式，实际 CSS 仍完整提供每个具体类。
| 工具族 | 基础写法 | 响应式模式 | 示例 |
|---|---|---|---|
| Display | d-flex | d-{breakpoint}-flex | d-md-flex |
| Float | float-start | float-{breakpoint}-start | float-lg-start |
| Flex | flex-row | flex-{breakpoint}-row | flex-md-row |
| Spacing / Gap | pa-4 | pa-{breakpoint}-4 | pa-lg-4 |
| Text / Typography | text-center | text-{breakpoint}-center | text-sm-center |
| Width / Height | w-50 | w-{breakpoint}-50 | w-xl-50 |
组合后的实际效果
下方容器在小于 md 时纵向排列，从 md 开始横向排列；内边距也会从 8px 切换为 24px。
内容 A
内容 B
html
<div class="d-flex flex-column flex-md-row pa-2 pa-md-6">
<!-- < 960px：纵向、8px 内边距 -->
<!-- ≥ 960px：横向、24px 内边距 -->
</div>组合基础类与响应式类即可在不同尺寸切换，而不需要额外媒体查询：
html
<div class="float-left float-md-right">小屏向左，md 以上向右</div>
<div class="d-block d-lg-none">仅在 lg 以下显示</div>
<div class="w-100 w-xl-50">默认全宽，xl 以上半宽</div>范围隐藏
隐藏 Helpers 也按模式汇总：
| 写法 | 生效范围 |
|---|---|
hidden-{breakpoint} | 只在指定区间隐藏，例如 hidden-md |
hidden-{breakpoint}-and-up | 从指定断点开始隐藏 |
hidden-{breakpoint}-and-down | 到指定断点区间结束前隐藏 |
hidden-print-only | 只在浏览器打印媒体（Ctrl+P / 导出 PDF）中隐藏 |
hidden-screen-only | 只在屏幕媒体中隐藏 |
固定的 CSS 断点
Utilities 使用项目标准断点生成静态媒体查询。运行时 display.thresholds 只影响 useMcDisplay() 返回的状态，不会改写已经编译的 CSS；如需两者一致，应保留默认阈值。
最后更新于