Bootstrap Checkbox样式定制求助：实现效果与目标样式偏差

问题根源 #

• 给checkbox添加了form-control类，这是为文本输入框设计的样式，会破坏checkbox的默认布局
• input-group的结构不合理，checkbox没有被正确放置在输入组的前置区域内

修正后的代码 #

<div class="col-2">
    <label for="WitholdingTax">Charge</label>
    <div class="input-group mb-3 align-items-center" style="height:50px;">
        <div class="input-group-prepend">
            <div class="input-group-text p-0" style="width:50px; height:100%;">
                <input type="checkbox" id="WitholdingTax" aria-label="Toggle tax charge">
            </div>
        </div>
        <span class="input-group-text flex-grow-1 d-flex justify-content-center">0</span>
        <div class="input-group-append">
            <span class="input-group-text" style="height:100%;">%</span>
        </div>
    </div>
</div>

自定义样式补充（贴近目标效果） #

如果需要让checkbox更大更显眼，可添加以下CSS：

/* 放大checkbox尺寸 */
#WitholdingTax {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
/* 确保输入组元素垂直居中 */
.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

关键调整说明 #

• 移除checkbox的form-control类，将其嵌套在input-group-text容器内，适配输入组布局
• 统一输入组高度，通过align-items-center让所有元素垂直居中
• 给checkbox设置id，与label的for属性对应，保证表单可访问性
• 用flex-grow-1让中间数字区域自动填充剩余空间，保持布局美观

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