如何为Bootstrap 5.2样式化表单元素添加上方标签

一、修改HTML结构 #

将input、select、output分别放入相对定位容器中，同时添加上方标签，确保原有flex布局不受影响：

<section class="container border border-primary bg_cont mb-3">
  <div class="row justify-content-center">
    <div class="col-lg-10 mx-auto">
      <div class="card shadow-sm p-3 mt-1 mb-1">
        <span></span>
        <div class="card-body">
          <div class="row mb-3 row-input">
            <div class="col-md-12">
              <label for="input" class="form-label d-none d-sm-inline">Input</label>
              <div class="input-group p-1">
                <!-- Input 带上方标签 -->
                <div class="position-relative flex-grow-1" style="width: 60%;">
                  <label class="input-top-label">数值</label>
                  <input type="number" name="" id="" class="reset_form formCheck maxAllow form-control input-rounded-start">
                </div>
                <!-- Select 带上方标签 -->
                <div class="position-relative flex-shrink-0" style="width: 15%;">
                  <label class="input-top-label">单位</label>
                  <select class="form-select select-input" name="unitsVelocity" id="units">
                    <option value="c" selected>c</option>
                  </select>
                </div>
                <!-- Output 带上方标签 -->
                <div class="position-relative flex-shrink-0" style="width: 25%;">
                  <label class="input-top-label">结果</label>
                  <div class="form-control output-group" id="value">*stuff*</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- More Stuff -->
      </div>
    </div>
  </div>
</section>

二、添加/修改CSS样式 #

新增标签的定位样式，同时确保容器不破坏原有布局：

/* 新增上方标签样式 */
.input-top-label {
  position: absolute;
  top: -1.2em;
  left: 0.5rem;
  font-size: 0.8em;
  opacity: 0.7;
  white-space: nowrap;
}

/* 确保相对定位容器不影响原有flex对齐 */
.position-relative.flex-grow-1,
.position-relative.flex-shrink-0 {
  display: flex;
  align-items: center;
}

/* 修正input-group内容器的间距，避免边框重叠问题 */
.input-group > .position-relative:not(:first-child) {
  margin-left: -1px;
}

关键说明 #

1. 相对定位容器：利用Bootstrap的position-relative类，让标签基于容器绝对定位，不占用文档流空间，完全不影响原有input-group的flex布局和元素尺寸。
2. 宽度匹配：给每个容器设置与原有元素一致的宽度比例（60%/15%/25%），保证布局和之前完全一致。
3. 标签定位：通过top: -1.2em将标签移到元素上方，left: 0.5rem和输入框内边距对齐，避免偏移。
4. 边框重叠处理：保留原有margin-left: -1px的逻辑，确保元素边框无缝衔接。

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