Bootstrap的.border类不响应式，因其无断点前缀，全屏生效；需用.border-md等带断点变体才能实现桌面显、手机隐；其在栅格中易错位，主因是.row负margin与.col默认padding干扰盒模型，导致边框视觉偏移或裁切。
Bootstrap 的 .border 类本身不响应式——加了就全屏生效，没法自动随屏幕尺寸开关。真要实现“桌面显边框、手机隐藏”，必须用带断点前缀的变体，比如 .border-md 或 .border-end-sm，否则要么全有，要么全无。
为什么直接写 .border 会导致响应式失效
因为 .border 是一个无断点的基础工具类，它在所有视口下都生效。Bootstrap 的响应式边框必须显式声明断点前缀，底层靠媒体查询控制显示逻辑。没加前缀，CSS 就不会做条件判断。
-
.border→ 所有尺寸都画边框 -
.border-md→ 仅 ≥768px（md断点）时生效 -
.border-end-sm→ 小屏及以上才加右边框（sm起生效） -
.border-0没响应式版本，想“大屏无、小屏有”，得组合：.border.border-md-0
.border 类在栅格中容易错位的真实原因
不是边框“画歪了”，而是 Bootstrap 栅格自身的盒模型干扰：.row 有负 margin（如 margin-inline-start: -0.75rem），.col 有默认 padding（如 px-3）。边框画在 padding 外侧，导致视觉上内容“缩进”，相邻列边框紧贴甚至重叠。
- 左侧边框常被
.row的负 margin 裁掉，尤其在小屏 - 只加
.border不调padding，边框和文字之间会空出一段“白边” - 列间无间隙？别指望边框撑开距离，
.border不提供间距，要用.gap-3（Bootstrap 5.3+）或.me-3 - 稳妥做法：弃用
.border，改用内联样式style="border: 1px solid #dee2e6;"，绕过工具类对盒模型的副作用
什么时候该放弃 .border 工具类
当需要精细控制边框表现时，工具类反而增加复杂度。比如要 0.5px 细线、圆角边框、阴影分隔、或与 border-radius 配合做卡片，.border 类完全覆盖不了。
-
.border只支持预设粗细（border-1~border-5）、颜色（border-primary等）和方向（-start/-end） - 无法设置
border-style: dashed或border-image - 圆角 + 边框需同步控制
border-radius，但.rounded-*类和.border类叠加时，圆角半径可能被 padding 干扰 - 性能无差异，但可维护性下降：一堆
.border-md-0.border-end-sm.px-0.ps-3比一段自定义 CSS 更难读、更难调
真正要注意的不是“能不能用 .border”，而是它是否参与了你正在调试的盒模型链——尤其是和 .row、.col、px-* 共同出现时，边框的位置、间隙、断点行为全都会被隐式影响。这时候，少一层工具类抽象，往往比多堆三个类更可靠。
