Bootstrap 5的.rounded-circle与.rounded-pills类失效问题求助

图片无法呈现正圆的原因及修复 #

.rounded-circle 类的核心是设置 border-radius: 50%，这要求元素为正方形才能显示正圆形。你的图片宽204px、高118px是长方形，所以只会呈现椭圆效果。

两种修复方案：

• 直接将图片宽高改为相同值，比如 width="150" height="150"
• 用容器包裹图片，通过容器实现正圆，同时保证图片比例不变：

<div class="rounded-circle overflow-hidden" style="width:150px; height:150px;">
  <img src="123.jpg" class="w-100 h-100 object-fit-cover" alt="商品图">
</div>

object-fit:cover 会让图片按比例填充容器，避免拉伸变形。

按钮胶囊样式不生效的原因及修复 #

首先检查自定义的 .button1 类是否设置了 border-radius 属性——如果自定义样式的优先级高于Bootstrap的 .rounded-pill，就会覆盖胶囊圆角效果。

修复方法：

• 移除 .button1 中自定义的 border-radius 规则
• 若必须保留自定义类，可在自定义CSS中提高 .rounded-pill 的优先级，比如写为 .button1.rounded-pill { border-radius: var(--bs-border-radius-pill) !important; }（更推荐前者，保持Bootstrap类的原生作用）

如果用 <input> 标签做按钮，同样要确保没有自定义样式覆盖圆角类，且正确添加 .rounded-pill 类。

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