应保留 bootstrap 默认断点前缀（如 col-md-），仅修改 $grid-breakpoints 中对应断点的像素值（如将 md 设为 640px），而非更改键名或类名前缀；强行自定义前缀需重写 sass mixin，导致维护成本剧增且脱离官方更新。
修改 bootstrap 4/5 的断点前缀（如 col-md- → col-tablet-）
不能直接改前缀名，bootstrap 的断点类名（col-md-、col-lg-）是编译时硬编码生成的，源码里没有“可配置前缀”开关。想用 col-tablet-，必须重写 sass 编译流程，而不是改个变量就行。
在 _variables.scss 中调整断点定义但不改前缀名
你可以在自定义 Sass 中覆盖 $grid-breakpoints，比如把 md 对应的宽度从 768px 改成 640px，但类名仍叫 col-md- —— 这是安全、推荐的做法。强行改前缀会破坏所有依赖断点名的工具类（px-md-3、d-lg-none 等）。
-
$grid-breakpoints: (xs: 0, tablet: 640px, md: 768px, lg: 992px, xl: 1200px);是非法写法，Bootstrap 不接受非标准键名 - 合法做法是保留
sm/md/lg键名，只调数值：$grid-breakpoints: (xs: 0, sm: 576px, md: 640px, lg: 1024px, xl: 1440px); - 改完后
col-md-6就生效在 640px 起，语义变成“tablet 宽度”，但类名不变 —— 这是实际项目中最可控的方式
真要输出 col-tablet- 类？只能 fork 并修改 bootstrap/scss/grid/mixins
Bootstrap 的栅格类由 make-grid-columns() 和 make-row() 等 mixin 驱动，它们遍历 $grid-breakpoints 的 key（如 md）拼接类名。若硬要 col-tablet-，需：
- 复制
bootstrap/scss/mixins/_grid.scss到项目中，重命名 mixin（如make-grid-columns-custom()） - 手动传入映射数组：
(tablet: 640px, desktop: 1024px)，而非依赖$grid-breakpoints键名 - 在循环里用
#{\$name}拼出col-#{$name}-*，而非固定写死md - 禁用原生
@import "bootstrap/scss/grid"，只导入你改过的版本
这会彻底脱离官方更新节奏，每次升 Bootstrap 版本都得手工同步 mixin 变更 —— 多数团队不值得为前缀语义付出这个成本。
更轻量的替代方案：用 CSS 自定义属性 + 媒体查询封装
如果只是想让团队写代码时有 col-tablet-6 的体验，又不想动编译链，可以用一层薄薄的 wrapper：
.col-tablet-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
@media (min-width: 640px) {
.col-tablet-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-tablet-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
/* ... 手动写 1–12 */
}
- 不依赖 Bootstrap 编译，纯 CSS，和任何版本共存
- 适合小范围试点，或遗留项目渐进改造
- 注意：没响应式回退（
col-tablet-在手机上默认不显示），需额外加col-12或媒体查询兜底
真正卡住的不是技术能不能做，而是改前缀后带来的维护熵增 —— 类名变私有、文档脱节、新人困惑、第三方组件不兼容。多数情况下，用好 md 这个名字，只调它的像素值，是最省力也最可持续的选择。
