Bootstrap 5.3.1响应式圆角(Rounded)配置不符预期问题排查

核心问题 #

你的问题出在响应式类的作用范围理解错误，以及类的覆盖逻辑没理清：

1. 中等屏幕（md）效果异常 #

你添加的rounded-bottom-sm-0是sm断点类，它会在所有≥576px的屏幕（包括md、lg等）生效，直接把元素的底部两个角（左下、右下）设为0圆角。结合你原有的类：

• rounded-4：全局四个角设为4圆角
• rounded-end-md-0：md屏幕下右部两个角（右上、右下）设为0圆角
• rounded-bottom-sm-0：所有≥sm的屏幕下底部两个角（左下、右下）设为0圆角

最终md屏幕下的实际样式：

• 左上：保留rounded-4的4圆角（未被覆盖）
• 右上：被rounded-end-md-0设为0
• 左下：被rounded-bottom-sm-0设为0
• 右下：被两个类同时设为0

这就导致了你看到的“仅左上角为4圆角”的结果。

2. 小屏幕（xs）效果异常 #

你使用的rounded-bottom-sm-0仅在≥576px的屏幕生效，而xs屏幕（<576px）下该类不生效，元素仅受rounded-4控制，因此四个角都是4圆角，不符合你“左上、右上角为4”的预期。

修正后的HTML代码 #

根据你的预期效果，精确控制每个断点的圆角样式：

<div class="card border-0 mt-5">
  <div class="row justify-content-center g-0 fs-4">
    <div class="test col-md-4 
                <!-- xs屏幕（<576px）：顶部两角4，底部两角0 -->
                rounded-top-4 rounded-bottom-0
                <!-- md屏幕（≥768px）：左部两角4，右部两角0；覆盖xs的bottom-0设置 -->
                rounded-start-md-4 rounded-end-md-0 rounded-bottom-md-4">
      <div class="card-body p-5">
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="col-md-4">
      <img src="..." class="img-fluid" alt="...">
    </div>
  </div>
</div>

补充说明 #

你的SCSS自定义代码是正确的，已经成功为圆角工具类开启了响应式支持，生成了rounded-start-md-4这类所需的变体类，无需修改。

内容的提问来源于stack exchange，提问作者Victor