Bootstrap 5 中应使用 rounded-0 rounded-lg 类组合实现小屏直角、大屏圆角：rounded-0 优先清除所有断点默认圆角，rounded-lg 在 lg 及以上断点恢复圆角，顺序不可颠倒，且避免混用 rounded-sm/md 或 rounded-pill。
用 Bootstrap 5 的响应式断点类控制 border-radius
bootstrap 5 默认按钮（btn）在所有屏幕尺寸下都带圆角，想让大屏（如 lg 及以上）保持圆角、小屏（sm 和 md）变直角，不能靠覆盖全局 $border-radius 变量——那会破坏整个设计系统。得用响应式工具类逐个控制。
核心思路：先用 rounded-0 清掉所有默认圆角，再对大屏单独加回圆角。注意顺序：类名越靠后优先级越高，且 Bootstrap 的响应式类只在对应断点及以上生效（rounded-lg 在 lg 及更大屏幕生效，rounded-md 在 md 及更大生效）。
-
rounded-0必须写在最前面，确保小屏（xs到md）都是直角 - 接着写
rounded-lg（或rounded），它只在lg及以上生效，不会影响小屏 - 不要用
rounded-sm或rounded-md，它们会在md断点起效，和你要的“小屏直角”冲突
示例：
<button class="btn btn-primary rounded-0 rounded-lg">提交</button>这样在
lg 及以上显示圆角，md 及以下就是直角。
为什么不用自定义 CSS 媒体查询？
你可能想直接写 @media (min-width: 992px) { .btn { border-radius: 0.375rem; } }，但容易踩坑：
- Bootstrap 的
btn类本身有border-radius: 0.375rem，你的媒体查询必须带!important才能覆盖，破坏可维护性 - 如果项目用了 Sass，改变量
$border-radius是全局生效，会影响卡片、输入框等其他组件 - 响应式类是 Bootstrap 官方支持的方式，语义清晰、无副作用、支持 RTL
除非你项目已弃用 Bootstrap 工具类、完全手写样式，否则没必要绕开原生方案。
兼容性注意：Bootstrap 4 和 5 的差异
如果你还在用 Bootstrap 4，它的响应式圆角类不支持断点前缀（比如没有 rounded-lg），只有 rounded（全尺寸圆角）和 rounded-0（全尺寸直角）。此时只能：
- 升级到 Bootstrap 5（推荐）
- 或用自定义类 + 媒体查询，例如：
.btn-square-on-mobile { border-radius: 0; }<br>@media (min-width: 992px) { .btn-square-on-mobile { border-radius: 0.25rem; } }并给按钮加btn-square-on-mobile类
Bootstrap 4 的 rounded 类在所有断点都生效，没法按需启用，这是版本限制，不是写法问题。
按钮状态下的圆角是否一致？
是的，:hover、:focus、:active、.disabled 等状态继承父元素的 border-radius 值，只要基础类设对了，状态变化时圆角不会突变。但要注意：
- 如果用了
btn-outline-*系列，其border颜色变化不影响圆角，无需额外处理 - 如果手动加了
box-shadow（比如shadow-sm），阴影会跟随圆角形状，无需调整 - 避免同时使用
rounded-pill—— 它会强制覆盖成椭圆角，和你的需求冲突
真正容易被忽略的是：某些 UI 库（如 AdminLTE）或定制主题可能重写了 .btn 的 border-radius，此时要检查 CSS 层叠顺序，优先用 Bootstrap 原生类而非依赖主题默认值。
