bootstrap 5 中用 rounded-0 rounded-lg 组合类实现大屏圆角、小屏直角，rounded-0 必须前置清除所有断点圆角，rounded-lg 后置仅在 lg 及以上生效；顺序颠倒或混用 rounded-sm 会导致小屏非直角。
Bootstrap 5 怎么让按钮在大屏圆角、小屏直角
直接用 rounded-0 rounded-lg 组合类，顺序不能颠倒。Bootstrap 5 的响应式工具类只在对应断点及更大尺寸生效，rounded-0 先清除所有尺寸的圆角（包括 xs/sm/md），rounded-lg 再在 lg（≥992px）及以上恢复圆角。
常见错误：写成 rounded-lg rounded-0 —— 后者会覆盖前者，全屏都是直角；或混用 rounded-sm，它在 sm（≥576px）就起效，破坏“小屏直角”目标。
-
rounded-0必须放在最前，确保 md 及以下无圆角 -
rounded-lg放后面，仅影响 lg+ 屏幕 - 不要用自定义媒体查询硬写
border-radius，容易被 Bootstrap 的:focus或.btn-primary规则覆盖，还得加!important - 状态样式（
:hover、:focus）自动继承基础类的圆角，无需额外处理
怎么给按钮组（.btn-group）设响应式圆角
按钮组默认抹平内部按钮左右圆角，rounded-0 和 rounded-lg 对它无效。必须手动覆盖子按钮的圆角，并区分首尾。
最稳妥的做法是加 wrapper 类 + CSS 覆盖，而不是改 .btn-group 自身的 border-radius —— 它对内部按钮没影响。
- 给容器加自定义类如
.btn-group-responsive - 用
@media (min-width: 992px)设置.btn-group-responsive > .btn { border-radius: 0.375rem; } - 再单独修复首尾外侧角：
.btn-group-responsive > .btn:first-child { border-start-start-radius: 0.375rem; border-end-start-radius: 0.375rem; }，:last-child同理 - 避免用
border-radius: 0.375rem直接写死——垂直按钮组（.btn-group-vertical）会错位，必须用border-start/end或border-top/bottom方向性属性
边框粗细和颜色怎么随屏幕尺寸变化
Bootstrap 没提供响应式边框宽度或颜色的内置类，得靠自定义 CSS 媒体查询配合变量或具体值。
别试图用 border 工具类组合（比如 border border-primary）做响应式切换——这些类没有断点前缀，全屏生效。
- 推荐定义一个新类如
.border-responsive，初始设border: 1px solid #dee2e6; - 在
@media (min-width: 992px)里重写为border: 2px solid #0d6efd; - 如果项目用了 Sass，可复用
$border-width和$primary变量，保持设计一致性 - 注意：边框变粗可能撑大按钮高度，建议同步调整
padding或用box-sizing: border-box避免布局偏移
为什么改 --bs-btn-border-radius 在按钮组里不生效
因为 .btn-group > .btn 的样式规则里有硬编码的 border-radius: 0，它优先级高于 var(--bs-btn-border-radius)，变量根本没机会注入。
DevTools 里看到 computed 的 border-radius 是 0px 而不是 var(--bs-btn-border-radius)，就说明变量链被截断了。
- 拼写必须严格为
--bs-btn-border-radius（连字符不能少，也不能写成borderRadius） - 该变量只作用于单个
.btn，对.btn-group内部按钮无效 -
.btn-group里的按钮圆角必须显式覆盖，且需!important或更高权重选择器 - 如果你用的是 Sass 构建流程，改
$border-radius变量后，仍需额外覆盖.btn-group > .btn的border-radius: 0规则
border-start-start-radius，垂直组得换成 border-top-left-radius，复制粘贴时一不留神就错位。
