Bootstrap rounded-pill徽章显示为椭圆，如何调整为正圆形？

你的问题出在：仅用rounded-pill类和 作为内容时，badge的宽高会因默认样式不一致变成椭圆形。只需给badge添加固定宽高并设置居中对齐，就能实现正圆形效果。

修改后的代码如下：

<span data-mdb-toggle="tooltip" title="unread" class="badge rounded-pill bg-info" style="cursor: default; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;">&nbsp;</span>

说明：

• width: 20px; height: 20px;：设置宽高一致，确保基础形状为正圆
• display: inline-flex; align-items: center; justify-content: center;：让内部内容居中，避免因内容位置导致形状变形
• 可根据需求调整20px的数值，改变圆形大小

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