不能——Bootstrap 5 按钮尺寸类是 Sass 变量驱动的静态编译结果，不支持运行时动态增补；需通过自定义 Sass 变量重新编译生成新类，或谨慎使用 CSS 覆盖。
Bootstrap 5 按钮尺寸类（btn-sm、btn-lg）能直接扩展吗？
不能——它们是静态编译出的固定尺寸组合，不支持运行时动态增补新尺寸类（比如 btn-xs 或 btn-xl）。Bootstrap 5 的尺寸类全部由 Sass 变量驱动，在构建时一次性生成 CSS 规则。你看到的 btn-sm 对应 $btn-padding-y-sm、$btn-font-size-sm 等变量值；没有定义 $btn-font-size-xs，就不会产出 btn-xs 类。
想加 btn-xs 或 btn-xl，该选 Sass 编译还是 CSS 覆盖？
优先走 Sass 编译路径，尤其项目已接入自定义构建流程：
- 在自定义 Sass 入口文件顶部新增变量定义，例如：
$btn-padding-y-xs: 0.125rem;<br>$btn-padding-x-xs: 0.5rem;<br>$btn-font-size-xs: 0.75rem;<br>$btn-line-height-xs: 1.5;
再 @import Bootstrap 源码，它会自动基于这些变量生成.btn-xs规则 - 若仅用 CDN，CSS 覆盖可行但有硬伤：需手动重写整套 padding/font/line-height/border-radius 组合，且无法复用 Bootstrap 的响应式断点逻辑（如
btn-lg在移动端自动降级） - 别用
transform: scale()伪扩展——按钮点击热区、焦点 outline、与相邻元素的 margin 塌陷都会错位
btn-sm 和 btn-lg 在不同容器中的实际表现差异
尺寸类不是孤立生效的，它们和父容器、兄弟元素存在隐式耦合：
- 嵌入
.input-group时，btn-sm会自动匹配input-group-sm的高度和圆角，但若input-group本身没加尺寸类，按钮可能上下错位 - 放在
.btn-group内，所有按钮必须统一尺寸类，混合btn-sm和btn-lg会导致边框对不齐、间距断裂 - 配合图标（如
<i class="bi bi-x"></i>）时，btn-sm默认图标尺寸偏大，需额外加fs-6或内联font-size: 0.875em -
btn-lg在移动端可能撑满屏幕宽度，建议配合col-md-auto或flex-shrink-0防止溢出
自定义尺寸带来的维护风险点
最常被忽略的是圆角和边框宽度的联动失效：
- Bootstrap 的
btn-sm使用$border-radius-sm，而你新增的btn-xs若没同步定义$border-radius-xs，它会 fallback 到$border-radius（默认值），导致小按钮圆角过大、视觉突兀 - 禁用态（
disabled）下，btn-sm的 opacity 和 cursor 是独立规则，自定义尺寸类若没复制对应.btn-xs:disabled块，禁用样式会丢失 - 深色模式（
data-bs-theme="dark"）下，btn-outline-*:hover的背景色过渡依赖原始变量，覆盖 CSS 很难完整复现
真正需要扩展尺寸时，先确认是否只是局部适配——多数场景用内联 style="padding: 0.25rem 0.75rem; font-size: 0.8125rem;" 更轻量，也避开全局样式污染。
