如何修改HTML代码使表单文本输入框按参考截图正确显示？

效果对比 #

• 预期效果：
  
• 当前异常效果：
  

原代码问题点 #

• 复选框input标签存在语法错误：value="true缺失闭合双引号，标签属性分隔不规范，导致浏览器渲染异常
• Flex布局类冲突：同时声明justify-content-start和justify-content-between两个互斥的主轴对齐规则，布局逻辑混乱
• 列宽分配不合理：3个表单项均使用col-md-3等宽布局，未考虑"Delivery Radius(Km)"这类长标签的宽度需求，导致文字被挤压
• 表单控件缺少统一样式类：数字输入框未使用Bootstrap原生表单类，没有宽度约束，会自动拉伸挤占标签空间
• 垂直对齐规则缺失：行容器没有设置垂直居中，左侧标签和右侧表单控件不在同一水平基线，出现高低错位

修复后完整代码 #

<div class="row align-items-center">
    <div class="col-md-3">
        <label class="mb-0">Service Options</label>
    </div>

    <div class="col-md-9">
        <div class="row align-items-center g-3">
            <div class="col-md-3 d-flex align-items-center">   
                <input 
                    type="checkbox" 
                    name="includeInActive" 
                    value="true"
                    <%= if(isDefined(includeInActive) && includeInActive){ %> checked="checked" <% } %>
                    class="me-2"
                > 
                <span>1-day Delivery</span>
            </div>
            <div class="col-md-4 d-flex align-items-center">
                <label class="mb-0 me-2 w-auto">Fees</label>
                <input 
                    type="number" 
                    min="0" 
                    value="0" 
                    step="any" 
                    class="form-control"
                    style="max-width: 120px;"
                />
            </div>
            <div class="col-md-5 d-flex align-items-center">
                <label class="mb-0 me-2 w-auto">Delivery Radius(Km)</label>
                <input 
                    type="number" 
                    min="0" 
                    value="0" 
                    step="any" 
                    class="form-control"
                    style="max-width: 120px;"
                />
            </div>
        </div>
    </div>
</div>

关键调整说明 #

• 补全了原代码的语法错误，保证标签可以被浏览器正常解析
• 移除冲突的布局类，统一使用align-items-center实现所有表单元素垂直居中，和左侧标签基线对齐
• 调整右侧三个表单项的列宽为3:4:5的比例，适配不同长度的标签文字，避免文字换行挤压
• 给数字输入框添加form-control类统一样式，设置120px的最大宽度，防止输入框过度拉伸
• 给复选框、标签添加统一的外边距，保证元素间距和预期效果一致
• 移除标签默认的底部外边距，消除多余空白导致的垂直错位

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