Bootstrap 5 的 border-类不支持断点前缀变体，必须通过自定义 CSS 配合媒体查询实现响应式边框宽度，且需严格对齐默认断点值（sm: 576px、md: 768px、lg: 992px、xl: 1200px），并确保加载顺序在 Bootstrap 主样式之后。
border-类不支持断点宽度，必须手写媒体查询
Bootstrap 5 的 border、border-2、border-3 等工具类**没有断点前缀变体**，写成 border-2-md 或 border-lg-3 完全无效。它们在所有屏幕尺寸下都固定生效。想让边框宽度随断点变化，唯一办法是自定义 CSS + 媒体查询，并确保这段 CSS 加载在 Bootstrap 主样式之后。
- 断点值必须严格对齐 Bootstrap 默认值：
sm: 576px、md: 768px、lg: 992px、xl: 1200px - 别用
min-width: 768px而不用min-width: 767.98px—— 边界像素差 0.02px 就可能让 iPad 横屏（1024px）或某些安卓平板竖屏（≈600px）出现双显/双隐 - 只改
border-width不够：必须同时声明border-style: solid和border-color，否则边框可能完全不显示
如何让 Card 在 md 断点下边框变宽、lg 下再加色
推荐给 .card 加一个专属 class（如 border-responsive），避免污染全局。基础边框用 border（即 1px solid var(--bs-border-color)），再分段覆盖：
@media (min-width: 768px) {
.card.border-responsive {
border-width: 2px;
}
}
@media (min-width: 992px) {
.card.border-responsive {
border-width: 3px;
border-color: #0d6efd;
}
}
- 顺序很重要：先设
border，再用媒体查询覆盖，否则border-width没作用对象 - 颜色不能只靠
border-primary：它没断点前缀，一加就全局生效；且它不带!important，容易被原生规则覆盖 - 如果需要灰底红边 → lg 下
border-color: #dc3545，xs/sm 下保持默认色，就得补一条@media (max-width: 767.98px)规则
别用 d-none + 多个卡片“模拟”响应式边框
有人把两个 .card 并排放，一个加 border-primary、一个加 border-secondary，再分别套 d-none d-lg-block 和 d-block d-lg-none。这看似能切换边框，实际问题一堆：
- DOM 中存在两份相同结构，语义混乱，读屏器会重复朗读
- 若卡片内含 JS 组件（如
bootstrap Carousel），d-none会让初始化失败——节点不可见时插件常跳过渲染 -
d-lg-block在 flex 容器里可能失效，尤其当父容器是flex-column时，d-inline-block根本不起作用 - 边框宽度默认是
1px，但border-primary只改颜色，不设宽度和线型，没配border类的话，边框照样不显示
真正需要不同宽度的场景其实很少
多数项目只需要「小屏无边框、大屏有边框」这种显隐逻辑，这时直接用 border-0 border-md 就够了——零额外 CSS，语义清晰，也更轻量。只有当你在做设计系统级组件、高定制化后台界面，或者设计师明确要求「手机 1px、平板 2px、桌面 3px」时，才值得投入成本写媒体查询。
一旦决定自定义，务必在真实设备上验证边界情况：iPad 横屏（1024px）、安卓平板竖屏（≈600px）、折叠屏展开态（≈1280px）——视觉误差很容易让人误判边框是否生效，而 DevTools 的模拟器经常不准。
