bootstrap的border-2至border-5仅控制宽度，必须搭配border或颜色类（如border-primary）才生效；单独使用无效，且不支持小数、响应式断点切换或与栅格系统无缝协同。
border-2 到 border-5 不能单独生效
Bootstrap 的 border-2～border-5 类只控制边框宽度，但**必须搭配颜色类（如 border-primary）或基础边框类（如 border）才能渲染出可见边框**。只写 border-3 是无效的，浏览器不会自动 fallback 到默认灰边框。
常见错误现象：加了 border-4 却没边框，检查是否漏了 border 或颜色类；或者误以为 border-0 是“重置为默认”，其实它是彻底移除边框（包括 border 原始声明）。
-
border border-3→ 3px 宽，默认色（#dee2e6） -
border border-4 border-success→ 4px 宽，绿色边框 -
border-2 border-warning→ 合法，因为border-warning自带border声明
用 border 工具类设边框粗细的实际限制
Bootstrap 边框工具类本质是预设的 CSS 变量映射：border-1 = 1px，border-2 = 2px……最大到 border-5 = 5px。它不支持小数、自定义值（如 1.5px）或响应式粗细切换（比如 md 下 border-2、lg 下 border-3）。
如果你需要非整数粗细、动态计算、或按断点切换宽度，就得放弃工具类，改用内联 style 或自定义 CSS：
<div style="border-width: 1.5px">手动设</div> <div class="border" style="border-width: max(2px, 0.1em)">响应式单位</div>
注意：border-width 不支持 Bootstrap 原生的断点前缀（如 border-md-3），这是工具类的设计盲区。
border 工具类在栅格中容易导致视觉错位
直接给 .col 加 border 类，常出现边框“缩进”、列间重叠、左侧边框被裁切等问题——根本原因是 .row 的负 margin 和 .col 的 padding 共同干扰了边框绘制位置。
更稳妥的做法是绕过工具类，用内联 style 显式控制：
- 清除干扰：
class="col px-0"移除左右 padding - 补内容内边距（可选）：
ps-3 pe-3（Bootstrap 5） - 写死边框：
style="border: 2px solid #adb5bd;"
这样能确保边框紧贴内容区域，且列与列之间间隙由 gap（Bootstrap 5.3+）或 me-3 等外边距类统一控制，不依赖边框自身间距。
border 工具类的优缺点很分明
优点就一条：快。几秒内给任意元素加上标准粗细+颜色的边框，适合原型、后台管理页、内部工具等对视觉一致性要求高、但定制需求低的场景。
缺点集中在灵活性上：
- 无法微调像素值（比如
1.2px、thin关键字） - 无法与 CSS 逻辑组合（如
border-width: calc(1px + 0.05rem)） - 响应式控制粒度粗（只有
border-sm-0这类显式开关，无border-sm-2） - 和栅格系统配合时需额外处理 padding/margin，否则视觉易出错
真正要用好它，得清楚什么时候该抄近路，什么时候该换车道——比如表单控件边框、卡片分隔线这类固定模式，border border-2 border-light 就很稳；但要做设计系统级的边框规范，就得提前规划变量和自定义类，别被工具类锁死。
