bootstrap 5 中 label 默认不支持 bg-* 类，因其为 inline 元素且无 padding；需添加 d-inline-block、px/py、text-white 和 rounded 等类显式控制样式与可访问性。
Bootstrap 5 中 label 默认不支持 bg-* 类，直接加无效
Bootstrap 5 的 label 元素默认没有设置 display 或 padding，所以即使写上 class="bg-primary"，背景色也几乎看不见——它只撑开文字宽高，没有内边距，且是 inline 级别。这不是 bug，是设计使然。
解决思路很直接：让 label 变成能“显色”的块级容器。
- 加
class="d-inline-block"或"d-block"控制布局行为 - 手动补
class="px-2 py-1"（或自定义padding）让背景有呼吸感 - 如果需要圆角/颜色对比，可叠加
rounded和text-white
<label class="d-inline-block bg-primary text-white px-2 py-1 rounded">用户名</label>
用 form-label 类时不能直接套 bg-*
Bootstrap 5 官方推荐的表单标签写法是 <label class="form-label"></label>，但它内部重置了 margin-bottom 和 font-weight，同时仍保持 display: inline。此时加 bg-* 依然无效。
正确做法是「覆盖 + 补全」：
- 保留
form-label获取语义和基础样式 - 额外加
d-inline-block改变显示模式 - 必须加
px/py，否则背景紧贴文字，视觉难识别 - 慎用
bg-dark等深色背景配默认黑色文字，记得加text-white
<label class="form-label d-inline-block bg-success text-white px-2 py-1 rounded">邮箱已验证</label>
想全局统一处理？别改 Bootstrap 源码，用 CSS 覆盖更安全
如果你在多个地方都需要带背景的 label，硬编码每个 class 易出错、难维护。更稳妥的方式是加一条轻量 CSS 规则：
- 不修改
node_modules下的 Bootstrap 文件 - 在你自己的 CSS（或
<style></style>块）里写：
.label-bg {
display: inline-block !important;
padding: 0.25em 0.5em !important;
border-radius: 0.25rem;
}
然后 HTML 里写：<label class="form-label label-bg bg-info text-white">提示</label>。这样既复用 Bootstrap 的颜色系统，又避免重复写 d-inline-block px-2 等。
注意 Safari 和旧版 Edge 对 inline 元素 background 的渲染差异
极少数情况下（尤其 Safari 14–15），纯 inline 标签加 background-color 可能出现上下留白被裁切、或背景高度不一致的问题。这不是 Bootstrap 特有，而是浏览器对 line-height 和 vertical-align 的处理差异。
应对方法很简单：
- 坚持用
d-inline-block或d-block，避开inline渲染路径 - 避免依赖
line-height来“撑高”背景，用padding显式控制 - 如需垂直居中文字，
py-1通常比align-middle更可靠
真正容易被忽略的是：背景 label 往往用于状态提示（如“必填”“已启用”），但没加 aria-label 或视觉隐藏文本时，屏幕阅读器可能读不出语义。如果 label 内容本身只是图标或缩写，得额外处理可访问性。
