Bootstrap 5 中直接用 rounded-pill 类即可实现椭圆按钮，其原理是设置 border-radius: 50rem；需确保按钮有足够宽高与内边距，避免与其他圆角类冲突，空按钮需手动补 px/py，Bootstrap 4 不支持该类。
Bootstrap 5 中直接用 rounded-pill 类就能实现椭圆按钮
bootstrap 5 内置了 rounded-pill 工具类，它本质是设置 border-radius: 50rem，足够大到让左右边缘完全圆滑相接，形成视觉上的椭圆（pill 形状）。只要按钮有足够宽度（比如带文字的常规按钮），效果就自然成立。
常见错误是给按钮加了 rounded-pill 却没看到椭圆——大概率因为按钮本身高度太小或内边距不足，导致圆角“撑不开”。解决方法很简单：
- 确保按钮使用了标准尺寸类，如
btn+btn-primary，避免自定义height或过度压缩padding - 不要同时写
rounded、rounded-1等其他圆角类，它们会覆盖rounded-pill - 如果按钮是空的（比如仅图标），需手动加
px-4 py-2之类补足宽高，否则椭圆不明显
Bootstrap 4 不支持 rounded-pill，得手动加样式或升级
Bootstrap 4 的工具类里没有 rounded-pill，强行写上不会生效。这时候有两个务实选择：
- 升级到 Bootstrap 5（推荐）：改动小，收益大，
rounded-pill开箱即用，且兼容所有btn变体 - 降级处理：在 CSS 中补充一条规则：
.rounded-pill { border-radius: 50rem !important; }，然后照常使用该 class；但要注意!important可能干扰主题定制或后续维护
别试图用 rounded-circle 替代——它会让按钮变成正圆，不是椭圆，尤其在文字按钮上会严重挤压内容。
自定义椭圆程度？改 $border-radius-pill 变量更稳妥
如果你用 Sass 编译 Bootstrap，想统一调整所有 rounded-pill 的“胖瘦”，直接改变量比全局覆写 CSS 更干净。Bootstrap 5 的默认值是 $border-radius-pill: 50rem，你可以把它设为 2rem（更柔和）或 100rem（更饱满）。
操作路径：在引入 Bootstrap 源文件前，先覆盖变量：
$border-radius-pill: 2rem; @import "bootstrap/scss/bootstrap";
注意：这个变量只影响 rounded-pill 类，不影响 rounded 或其他圆角类；也不影响已编译好的 CSS 文件，所以必须走 Sass 构建流程。
按钮文字被截断或垂直偏移？检查 line-height 和 padding 匹配
加了 rounded-pill 后文字贴顶、下沉或左右溢出，通常不是圆角的问题，而是按钮内部排版失衡。Bootstrap 的 btn 类自带配套的 padding 和 line-height，一旦你额外设置了 font-size、height 或重写了 padding，就容易破坏基线对齐。
- 优先用 Bootstrap 提供的尺寸类：比如
btn-lg/btn-sm而非手动调font-size - 若必须自定义字体大小，请同步调整
padding（例如py-2 px-4→py-3 px-5） - 避免设置
line-height: 1这类硬编码值，它会让文字在高圆角按钮里失去垂直居中余量
椭圆按钮的视觉容错率低，一点点内边距偏差就会让文字“悬空”或“卡边”，这点比普通圆角按钮更敏感。
