如何在Bootstrap 5.2中调整复选框尺寸匹配小尺寸表单控件？

Bootstrap 5.2官方文档里，给表单标签加col-form-label-sm、输入框加form-control-sm就能实现小尺寸样式，但复选框并没有提供对应的官方适配类。要让复选框及关联标签和email字段的sm尺寸保持一致，可按以下方式修改代码：

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-1 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-9">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row">
    <div class="form-check mb-3 offset-sm-1 required">
        <input id="id_accept" name="accept" required="" tabindex="1" type="checkbox" class="form-check-input" style="width: 1rem; height: 1rem; margin-top: 0.25rem;">
        <label for="id_accept" class="form-check-label col-form-label-sm">
            Accept
        </label>
    </div>
</div>

关键改动说明 #

• 复选框尺寸：通过内联样式设置width: 1rem; height: 1rem，把复选框缩小到和sm输入框匹配的尺寸，同时调整margin-top保证垂直对齐。
• 标签样式：给复选框标签添加col-form-label-sm类，让标签字体大小和email字段的标签保持一致（0.875rem），实现视觉统一。
• 对齐优化：移除了原代码中left: 1.5ex的内联样式，依靠offset-sm-1类就能保证和email字段的标签对齐。

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