form-control-sm和form-control-lg用于统一调整表单控件垂直尺寸（含padding、font-size、height等），仅适用于.form-control系组件（如input、textarea、select），不控制宽度，对checkbox/radio无效；需与.form-control同元素使用，且在.input-group中须整体添加对应尺寸类。
form-control-sm 和 form-control-lg 什么时候该用
这两个类只改垂直尺寸（高度、内边距、字号），不控制宽度，也不影响 input[type="checkbox"] 或 input[type="radio"]。适合需要统一表单密度的场景：比如后台管理页多字段并排时用 form-control-sm 节省空间；登录页强调操作焦点时用 form-control-lg 提升可点击区域。
别在响应式需求里硬套——它们没有断点逻辑。想“小屏 sm、大屏 lg”，得手动组合：class="form-control form-control-sm d-none d-md-block" + class="form-control form-control-lg d-md-none"。
input-group 内部高度对不齐怎么办
常见现象是输入框矮半截、按钮或 input-group-text 突出来。根本原因是子元素没同步尺寸类，且 flex 对齐未强制拉伸。
- 给
input-group加align-items-stretch（Bootstrap 5.3+ 默认有，但显式写上更稳） -
input、button、select必须用同一套尺寸类：比如全用form-control-sm+btn-sm -
input-group-text别单独设padding或font-size；图标优先用<i class="bi bi-search"></i>，并确认没破坏vertical-align: middle
漏掉任意一项，都可能让视觉错位。
复选框/单选框怎么调大小
form-control-sm 和 form-control-lg 对它们完全无效。原生 input[type="checkbox"] 无法靠 width/height 直接缩放，浏览器会忽略。
正确做法是覆盖伪元素：
input[type="checkbox"].form-check-input::before {
width: 16px;
height: 16px;
top: -0.125rem;
left: -0.125rem;
}
input[type="checkbox"].form-check-input::after {
width: 8px;
height: 4px;
border-width: 0 0 2px 2px;
transform: rotate(-45deg) translate(1px, 1px);
}
注意 ::before 的 top/left 必须随 width/height 同步调整，否则脱离文字基线；::after 的 transform 偏移量也要按比例缩放，不然对勾会偏。
为什么加了尺寸类却没变化
最常踩的坑是类没加对位置：
-
form-control-sm必须和form-control在同一个input元素上，不能只挂在父容器上 - 用了
input-group却只给input加尺寸类，忘了给整个div加input-group-sm - 自定义 CSS 强制写了
height或padding，把 Bootstrap 的计算值覆盖掉了 - 在 Vue/React 组件里透传 class 失败，第三方封装层吃掉了尺寸类
打开浏览器开发者工具，直接看 computed 样式里 height、padding、font-size 是否被覆盖——比猜原因快得多。
