bootstrap怎么修改表单输入框的尺寸大小（sm/lg）-Bootstrap教程-PHP中文网

form-control-sm 和 form-control-lg 失效主因是未直连输入元素、被CSS覆盖或误用于非标准组件；其生效需同元素添加、.input-group整体加类，并注意仅适用于.form-control系组件，不支持表单复选/单选框。

为什么 `form-control-sm` 和 `form-control-lg` 有时不生效

bootstrap 的尺寸类只对 .form-control 及其变体（如 .form-select、.form-check-input）起作用，但前提是它们必须直接应用在输入元素上，且不能被其他 css 覆盖或干扰。常见失效原因包括：父容器用了 .input-group 却漏加尺寸类、自定义 css 强制设了 height 或 padding、或者用了非标准的表单组件（比如第三方封装的 vue/react 组件未透传 class）。

实操建议：

确保尺寸类和 form-control 在同一元素上：<input class="form-control form-control-sm">
.input-group 需整体加尺寸类：<div class="input-group input-group-sm">...</div>
检查浏览器开发者工具，确认 font-size、padding、line-height 是否被其他样式覆盖
Bootstrap 5+ 不再支持 .input-sm 这类旧类名，只认 form-control-sm

`form-control-sm` 和 `form-control-lg` 的实际尺寸差异

它们不是简单调大字号，而是整套重置：包括 padding、font-size、border-radius 和 height。Bootstrap 5.3 默认值如下（单位 rem）：

form-control-sm: padding = 0.25rem 0.5rem, font-size = 0.875rem, height = calc(1.5em + 0.5rem + 2px)
form-control-lg: padding = 0.5rem 1rem, font-size = 1.25rem, height = calc(1.5em + 1rem + 2px)

注意那个 + 2px —— 是 border 宽度，所以最终高度不是纯计算值，还依赖 border-width。如果你改过全局 $border-width 变量，尺寸会联动变化。

实操建议：

不要单独覆盖 height，否则会破坏垂直居中逻辑
若需微调，优先用 padding 或 font-size，并同步调整 line-height
响应式场景下，尺寸类不自动适配断点（比如「小屏用 sm，大屏用 lg」），得手动配合 d-none d-md-block 类组合

多类型表单控件的尺寸一致性处理

form-control-sm/lg 对 <input>、<textarea></textarea>、<select></select>（需用 .form-select）都有效，但 <input type="checkbox"> 或 <input type="radio"> 不适用——它们走的是 .form-check-input 体系，尺寸由 $form-check-input-width 等 Sass 变量控制，无法用 class 切换。

VPS Bootstrap

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

下载

实操建议：

<select></select> 必须用 .form-select 才能响应 form-select-sm（不是 form-control-sm）
<textarea></textarea> 支持 form-control-sm/lg，但 rows 属性仍影响初始高度，类只控制单行基准
自定义文件上传（.form-control-file）在 Bootstrap 5 中已被移除，需用 .form-control + type="file"，此时 form-control-sm 仅影响外框，内部按钮文字大小不变

和第三方库（如 Vue-Bootstrap、React-Bootstrap）混用时的坑

这些库通常封装了原生组件，但未必把 sm/lg 属性映射到最终 class。比如 Vue-Bootstrap 的 <b-form-input size="sm"></b-form-input> 会正确输出 form-control form-control-sm，但某些轻量组件可能只支持 size 字符串而忽略布尔值，或把 sm 当作 prop 名而非 class 值。

实操建议：