如何让表单中label标签与input-group-append类元素在同一行显示

DevOps 小满

2026-10-2

问题原因

布局错位主要有3个核心原因：

Bootstrap栅格类断点适配不全：第一个列只设置了col-6，第二个列只设置了col-md-2，当视口宽度小于md断点（<768px）时，第二个列会自动占满整行触发换行
<h4>是块级元素，自带上下外边距，会挤压布局导致垂直方向不对齐
input-group-append是input-group组件的专属子类，单独使用会丢失默认的弹性布局属性

修正方案

调整后代码如下：

<div class="form-group row align-items-center">
    <div class="col-8">
        <h4 class="mb-0">
            <label class="">
                The Money that you need is : @(HelpSeeker.money_needed= HelpSeeker.monthly_fees * HelpSeeker.month_count_needed) S.P
            </label>
        </h4>
    </div>
    <div class="col-4">
        <div class="input-group">
            <div class="input-group-append">
                <span class="input-group-text"> $</span>
                <span class="input-group-text"> 0.00</span>
            </div>
        </div>
    </div>
</div>

修改点说明

给外层row添加align-items-center类，让两个列的内容自动垂直居中对齐
把两个列的栅格类改为全断点生效的col-8+col-4，总宽度占满12列避免换行，也可以根据实际需求替换为col-md-8+col-md-4做断点适配
给<h4>添加mb-0类，清除默认下外边距，避免高度溢出挤压布局
给input-group-append外层补充input-group容器，恢复组件默认的弹性布局样式