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