Bootstrap表单中不同尺寸的输入框怎么选-Bootstrap教程-PHP中文网

form-control-sm和form-control-lg用于统一调整表单控件垂直尺寸（含padding、font-size、height等），仅适用于.form-control系组件（如input、textarea、select），不控制宽度，对checkbox/radio无效；需与.form-control同元素使用，且在.input-group中须整体添加对应尺寸类。

bootstrap表单中不同尺寸的输入框怎么选

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 直接缩放，浏览器会忽略。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

正确做法是覆盖伪元素：

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 偏移量也要按比例缩放，不然对勾会偏。