Bootstrap表单对齐 解决复选框间距不足与垂直居中问题

当前写法没有使用Bootstrap官方规范的复选框组件结构，直接将input嵌套在label内且未加载对应组件类，仅给input单独加align-middle无法生效：既缺少复选框与标签文字间的默认间距，列容器也未做垂直对齐配置，才会出现两个显示问题。另外你给下拉框加的d-flex类属于冗余类，会破坏form-floating的原生样式。

直接替换原有代码段即可，无需额外编写自定义CSS：

<div class="row mb-2">
    <div class="col-sm-4 d-flex align-items-center">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="1" name="Credit_Pulled" id="Credit_Pulled">
            <label class="form-check-label" for="Credit_Pulled">
                Credit Pulled
            </label>
        </div>
    </div>
    <div class="col-sm-4 d-flex align-items-center">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="1" name="Is_On_Terms" id="Is_On_Terms">
            <label class="form-check-label" for="Is_On_Terms">
                Approved For Terms
            </label>
        </div>
    </div>
    <div class="form-floating col-sm-4">
        <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>

• 给承载复选框的两个col-sm-4容器添加d-flex align-items-center类，让列内内容自动垂直居中，和右侧下拉选择框的高度完全对齐
• 采用Bootstrap原生form-check组件结构包裹复选框和对应标签，form-check-input、form-check-label类自带官方示例中的标准间距，不需要手动加margin控制
• 将嵌套在label内的input拆出，通过label的for属性和input的id做关联，符合Bootstrap表单组件的使用规范
• 移除下拉框上冗余的d-flex类，避免浮动标签样式错乱

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