border-2和border-md不能组合实现响应式边框宽度，因前者固定2px全局生效，后者仅控制≥768px时边框显隐；叠加结果是小屏无边框、大屏恒为2px，无法达成不同断点不同宽度效果。
border-2 和 border-md 不能组合出响应式边框宽度
Bootstrap 5 的 border-2 是全局固定 2px，border-md 只控制「是否显示边框」，两者叠加不会让小屏用 1px、大屏用 2px。你写 border-2 border-md，结果是：所有尺寸都 2px 宽，且仅在 ≥768px 显示——border-md 把小屏的边框完全干掉了，border-2 根本没机会生效。
真正需要不同宽度时，必须放弃工具类，走自定义 CSS + 媒体查询。核心约束有三个：
-
border-style必须显式设为solid（或dashed等），否则改border-width也没用 -
border-color必须同时声明，否则依赖--bs-border-color，而它在不同主题下可能不一致 - 自定义规则必须加载在 Bootstrap CSS 之后，否则被覆盖
如何用媒体查询实现断点边框宽度 + 颜色联动
推荐给 .card 加一个专属 class，比如 border-responsive，然后按 Bootstrap 断点值写媒体查询：
@media (max-width: 575.98px) {
.card.border-responsive {
border: 1px solid #dee2e6;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.card.border-responsive {
border: 2px solid #0d6efd;
}
}
@media (min-width: 992px) {
.card.border-responsive {
border: 3px solid #198754;
}
}
注意边界像素要留 0.02px 余量（如 575.98px），避免 576px 正好卡在 sm 断点线上导致样式错乱。如果只在某断点改颜色、宽度不变，可只覆盖 border-color，但别漏掉 !important——原生 border-primary 没加 !important，但权重更高，不加就无效。
为什么不用 d-none + 多个带色卡片模拟
这种写法看似简单：<div class="border-primary d-block d-md-none"></div>
<div class="border-secondary d-none d-md-block"></div>，但实际会引发三类问题：
- DOM 中存在重复结构，屏幕阅读器会读两次，语义错误
- 若父容器是
flex或grid，d-none会破坏 flex item 的排列逻辑，尤其在 Safari 中容易错位 - 每个卡片都要单独加
border类保证宽度，否则border-primary只改色不生效——这反而比写媒体查询更啰嗦
Card 边框定制最容易被忽略的细节
很多开发者调完 CSS 发现边框还是没变，原因往往不是媒体查询写错，而是：
- 没在
.card上保留基础border类或显式border: 1px solid transparent，导致自定义border-color没渲染目标 - 用了
border-0清除默认边框后，又没在媒体查询里重新声明完整border，只写了border-width或border-color - 在移动端调试时用了 Chrome 的「设备模拟器」，但它的像素比和真实设备不一致，导致 768px 断点触发不准；真机测试 iPad 横屏（1024px）、安卓平板竖屏（≈600px）才可靠
