应使用媒体查询实现.container圆角响应式切换：先设.rounded-on-desktop { border-radius: 0; }，再通过@media (min-width: 992px) { .rounded-on-desktop { border-radius: 12px; } }在lg及以上断点启用圆角，避免全局污染、确保断点一致，并配合overflow: hidden防止子元素溢出。
如何用CSS媒体查询控制Container圆角响应式切换
Bootstrap默认的.container或.container-fluid不带圆角，必须手动加border-radius；直接写死在全局样式里会同时影响所有断点，所以得靠媒体查询分屏控制。
关键不是“Bootstrap有没有这个功能”，而是“怎么让border-radius只在≥lg（992px）生效，小屏自动归零”。Bootstrap 5+ 的断点类（如.d-none .d-lg-block）不支持圆角控制，必须手写CSS。
- 推荐把样式加在
<style>块或自定义CSS文件里，避免覆盖Bootstrap源码 - 选对断点值：Bootstrap 5默认
lg起始为992px，媒体查询用@media (min-width: 992px) - 别用
!important——除非你确认有更高优先级的样式在干扰，否则先检查选择器权重
给Container加class还是直接选中？
直接给<div class="container">加一个自定义class（比如rounded-on-desktop）最稳妥，避免污染其他容器。不建议全局修改.container，因为可能影响卡片、模态框等内部嵌套的容器。
示例写法：
<div class="container rounded-on-desktop"> <!-- 内容 --> </div>
对应CSS：
.rounded-on-desktop {
border-radius: 0;
}
@media (min-width: 992px) {
.rounded-on-desktop {
border-radius: 12px; /* 数值按设计稿调整 */
}
}- 圆角值建议用
px或rem，避免用%——宽度变化时百分比圆角会失真 - 如果用了
.container-fluid，同样适用该class，无需额外处理 - 若项目已用CSS-in-JS或Tailwind，可改用对应方案（比如Tailwind的
rounded-lg lg:rounded-xl），但原生Bootstrap项目请坚持CSS方案
为什么用min-width而不是max-width？
因为目标是“大屏有圆角”，逻辑上更自然的写法是“从某个宽度开始启用”，而非“在某个宽度以下禁用”。用@media (min-width: 992px)语义清晰、维护性好，且与Bootstrap断点定义一致。
- 错用
@media (max-width: 991.98px)会导致边界模糊——992px刚好卡在断点边缘时行为不可控 - Bootstrap的
lg断点是992px，不是991px或1024px，硬写其他值容易和栅格系统错位 - 如果项目改过
$grid-breakpoints，必须同步更新媒体查询里的数值，否则响应式失效
移动端圆角消失但阴影/边框还在？检查溢出裁剪
有时加了border-radius后，内部子元素（比如图片、卡片）在小屏下依然显示圆角“残影”，其实是父容器overflow: hidden没生效。Bootstrap 5的.container默认不设overflow，但如果你加了border-radius又没配overflow: hidden，子元素会溢出。
- 仅当容器内有绝对定位或超出边界的元素时，才需要加
overflow: hidden - 加了
overflow: hidden会影响下拉菜单、Tooltip等浮层，务必测试交互组件是否被裁剪 - 更安全的做法是：只给需要视觉圆角的外层wrapper加
border-radius和overflow，而不是直接动.container
圆角本身很简单，难的是它和响应式、溢出控制、断点一致性这三件事绑在一起——漏掉任意一环，手机端就可能看到不该出现的弧线，或者大屏里内容被意外裁掉。
