应将label包入col-*容器并设text-end对齐，避免直接给label设width；仅当文字长度差异极大且栅格不适用时，才用display:inline-block+width+margin-right的内联样式方案。
Bootstrap 表单中 label 宽度不一致怎么办
直接用 .form-control 默认样式时， 没有固定宽度，纯靠内容撑开，左右不对齐、视觉混乱是常态。尤其在水平表单（.row + .col-*）或自定义布局里，label 宽度必须显式控制，否则输入框永远“飘”。
用栅格类（col-*）控制 label 容器宽度最稳妥
Bootstrap 5 不再提供 仅当栅格无法满足时才用内联样式，比如 label 文字长度差异极大（“姓名” vs “用户实名认证绑定手机号”），又不想拉宽整个列容器： 真正需要控制的是 label 所在的「容器」，不是 label 本身。这个边界意识一旦模糊，后续所有对齐、响应式、嵌套表单都会开始不可控。.control-label 或 .col-sm-2 这类旧版专用类，但你可以把 包进 text-align: right 对齐文本：<div class="row mb-3">
<div class="col-sm-3 text-end">
<label for="username" class="col-form-label">用户名</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="username">
</div>
</div>
col-sm-3 和 col-sm-9 加起来为 12 列，保证整行对齐；不同字段复用相同比例即可统一 label 宽度text-end（不是 text-right，后者在 v5 已废弃）让文字右对齐，避免和输入框之间留白过大 自己加 style="width:120px" —— 它脱离文档流后，响应式会失效，小屏下 label 可能被挤到输入框上方且错位用
style="width" 强制固定 label 宽度的适用场景<div class="row mb-3">
<div class="col-sm-12">
<label for="phone" class="col-form-label" style="display: inline-block; width: 180px; text-align: right; margin-right: 1rem;">手机号</label>
<input type="tel" class="form-control d-inline-block w-auto" id="phone">
</div>
</div>
display: inline-block 是关键，否则 width 在 上无效（默认是 inline 元素）w-auto 配合 d-inline-block 让输入框不占满剩余空间，避免换行或挤压margin-right 留出间距，否则 label 和 input 紧贴，可读性差@media 覆盖 width，否则小屏 label 会溢出为什么不用
.form-label 直接设 width.form-label 是 Bootstrap 5 新增的语义类，但它只负责字体、颜色、上下间距，**不带任何宽度逻辑**。你给它加 width: 100px 后，它会变成块级行为但不参与栅格计算，极易破坏 .row 布局。更麻烦的是：如果 label 后面跟了 .form-text 或校验提示，它们会因 label 的 width 设置而错位或重叠。
