Bootstrap 5.2 form-floating表单标签与内容重叠如何解决

问题原因 #

重叠问题由3处不符合组件使用规范的写法导致：

• form-floating容器DOM顺序错误：Bootstrap 5.2要求浮动标签容器内必须先放置表单控件（input/select/textarea），再放置关联label，现有代码先写label后写控件，直接导致浮动定位逻辑失效
• 类名冲突：给form-select额外添加了form-control、d-flex类，覆盖了组件依赖的默认内边距、高度样式；首行row添加的align-items-center会拉伸列内表单项容器，造成标签定位偏移
• 控件属性冲突：直接给浮动容器内的textarea设置rows="8"，和浮动标签的高度适配规则冲突；input/textarea未设置placeholder属性，导致标签上浮状态判断失效

方案一：调整DOM结构（官方推荐，无额外CSS） #

按照规范调整元素顺序、移除冲突类即可，修复后代码如下：

<div class="row mb-2 align-items-center">
    <div class="col-sm-4">
        <input type="checkbox" class="form-check-inline" value="1" name="Credit_Pulled" id="Credit_Pulled">
        <label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
    </div>
    <div class="col-sm-4">
        <input type="checkbox" class="align-middle" value="true" name="Is_On_Terms" id="Is_On_Terms">
        <label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
    </div>
    <div class="col-sm-4 form-floating">
        <select class="form-select" id="Terms_Days" name="Terms_Days">
            <option value="0" selected>NONE</option>
            <option value="30">NET-30</option>
            <option value="60">NET-60</option>
            <option value="90">NET-90</option>
        </select>
        <label for="Terms_Days">Terms Period</label>
    </div>
</div>
<div class="row mb-2">
    <div class="col-sm-4 form-floating">
        <input type="text" class="form-control" id="Credit_Limit" name="Credit_Limit" placeholder=" ">
        <label for="Credit_Limit">Approved Limit</label>
    </div>
</div>
<div class="row mb-2">
    <div class="col-sm-12 form-floating">
        <textarea class="form-control rounded" style="height: 200px" id="Review_Notes" name="Review_Notes" placeholder=" "></textarea>
        <label for="Review_Notes">Review Notes</label>
    </div>
</div>

注意：form-floating容器内的input、textarea必须添加placeholder属性（值可以为单个空格），否则组件无法通过:placeholder-shown伪类判断控件状态，标签上浮动画会失效。

方案二：保留现有DOM结构，通过自定义CSS修复 #

如果不想改动现有HTML结构，直接引入以下自定义CSS即可强制修正定位问题：

/* 修正label在前时的基础定位 */
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 0.75rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    z-index: 2;
    border: 1px solid transparent;
}
/* 统一控件内边距，预留标签位置 */
.form-floating > .form-control,
.form-floating > .form-select {
    padding: 1.625rem 0.75rem 0.625rem;
    min-height: calc(3.5rem + 2px);
}
/* 控件聚焦、有值时标签上浮样式 */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    background: #fff;
    padding: 0 0.25rem;
    height: auto;
}
/* 适配textarea高度 */
.form-floating > textarea.form-control {
    min-height: 200px;
    line-height: 1.5;
}
/* 抵消select上冲突类的影响 */
.form-select.form-control.d-flex {
    display: block !important;
    padding-top: 1.625rem;
}

两种方案都可以彻底解决标签重叠问题，表单布局会和Bootstrap官方示例效果完全一致。

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