<p>Bootstrap 5 的 border- 系列工具类不支持响应式边框宽度，仅提供断点下的显隐控制（如 border-md），若需动态调整边框宽度，必须通过自定义 CSS 配合媒体查询实现，并确保其加载顺序在 Bootstrap CSS 之后。</p>
border-* 工具类不支持动态改边框宽度
Bootstrap 5 的 border- 系列工具类（如 border、border-2、border-3）本身**没有断点前缀变体**，也就是说，border-2 在所有屏幕尺寸下都是 2px 宽，无法写成 border-2-md 或类似形式。官方只提供了带断点的「显隐控制」类（如 border-md），但不提供「宽度响应式」能力。
想让边框宽度随断点变化，必须用自定义 CSS + 媒体查询
这是唯一可靠方式。核心思路是：给 .card 设一个基础边框（比如 border-1），再用媒体查询覆盖不同断点下的 border-width 值。
- 确保自定义 CSS 加载在 Bootstrap CSS 之后，否则会被覆盖
- 断点值必须对齐 Bootstrap 默认值：
sm: 576px、md: 768px、lg: 992px、xl: 1200px - 推荐直接作用于
.card或加专属 class（如border-responsive），避免污染全局
示例：
@media (min-width: 768px) {
.card.border-responsive {
border-width: 2px;
}
}
@media (min-width: 992px) {
.card.border-responsive {
border-width: 3px;
}
}别踩这些坑
常见错误包括：
- 误以为
border-md+border-3可叠加生效 —— 实际上border-md控制显隐，border-3是全局宽度，两者不组合 - 用
d-none d-lg-block包裹不同边框卡片来“模拟”响应式 —— 这会导致 DOM 中存在多个卡片副本，影响性能和语义 - 在
.card上直接写内联style="border-width: 2px"—— 内联样式无法被媒体查询覆盖，且难以维护 - 忽略
border-style和border-color—— 单改border-width时，若没显式声明border-style: solid，边框可能不显示
如果只要「有/无边框」切换，优先用 border-* 断点类
多数场景其实不需要动态宽度，只需要「小屏无边框、大屏有边框」——这时直接用 border-0 border-md 就够了，零额外 CSS，语义清晰，也更轻量。
真正需要不同宽度的场景很少见，通常出现在设计系统级组件或高定制化后台界面里；一旦决定自定义，务必在真实设备上验证 iPad 横屏（1024px）、安卓平板竖屏（≈600px）等边界情况，因为视觉误差容易让人误判边框是否生效。
