使用Bootstrap 5无法右对齐表单输入框中input-group-text内容

一、实现标签文字右对齐 #

Bootstrap 5内置了text-end类，直接给input-group-text加上就能让文字右对齐，配合你设置的固定宽度就能达到目标效果：

<div class="container mt-3">
  <div class="input-group mb-3">
    <span class="input-group-text text-end" style="width: 200px;">Person</span>
    <input type="text" class="form-control" placeholder="First Name">
  </div>
</div>

如果这个类没生效，也可以直接用内联CSS强制设置：style="width: 200px; text-align: right;"，效果完全一致。

二、更合理的统一宽度设置 #

不建议每个标签都写内联width，推荐自定义一个CSS类来统一控制，后续修改宽度只需要改一处代码：

1. 编写自定义样式 #

/* 统一设置输入组标签的宽度和对齐方式 */
.form-label-fixed {
  width: 200px;
  text-align: right;
}

2. 在HTML中复用类 #

<div class="container mt-3">
  <div class="input-group mb-3">
    <span class="input-group-text form-label-fixed">Person</span>
    <input type="text" class="form-control" placeholder="First Name">
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text form-label-fixed">Email</span>
    <input type="email" class="form-control" placeholder="example@domain.com">
  </div>
</div>

要是需要适配移动端，还可以加个响应式断点，自动调整宽度：

.form-label-fixed {
  width: 200px;
  text-align: right;
}

/* 小屏幕下缩小标签宽度 */
@media (max-width: 576px) {
  .form-label-fixed {
    width: 100px;
  }
}

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