bootstrap 5 的 .form-control 默认左右 padding 是 1rem(16px),由 sass 变量 $input-padding-x 控制,非硬编码;推荐用 ps-0/pe-0 工具类或自定义 class 覆盖,避免仅设 padding: 0 破坏上下间距与图标布局。

Bootstrap 5 默认 input padding 是多少
Bootstrap 5 的 .form-control 默认左右 padding 是 1rem(即 16px),这个值来自 $input-padding-x 变量。它不是写死在 CSS 里,而是通过 Sass 变量控制的,所以直接覆盖样式比硬写 !important 更稳妥。
用自定义 class 覆盖 padding 最安全
直接修改 .form-control 全局样式会影响所有表单,容易引发意外;推荐给特定输入框加一个新 class,比如 .no-padding-x:
.no-padding-x {
padding-left: 0;
padding-right: 0;
}
然后在 HTML 中使用:
<input type="text" class="form-control no-padding-x">
- 不要只写
padding: 0,否则会把上下 padding 也去掉,破坏垂直居中和行高适配 - 如果用了
.form-floating,需额外处理 label 的 left/right 偏移,否则 label 会遮住输入内容 - 移动端键盘弹出时,某些安卓浏览器对零左右 padding 的 input 有光标定位异常,建议至少保留
4px左右
用 Bootstrap 工具类快速试错(仅开发阶段)
Bootstrap 5 内置了 ps-0(padding-start: 0)和 pe-0(padding-end: 0),可直接组合使用:
<input type="text" class="form-control ps-0 pe-0">
- 适用于临时调试或原型阶段,语义清晰、无副作用
- 注意:
ps-/pe-是基于 RTL/LTR 自适应的,比pl-/pr-更现代,但旧项目若没启用 RTL 支持,效果一致 - 这类工具类不参与 Sass 编译,无法通过变量定制,上线前建议换成自定义 class
为什么不能只改 padding-left 不动 padding-right
Bootstrap 的 .form-control 在不同状态(focus、invalid、valid)下会动态添加图标(如 .form-control-feedback 或 .invalid-feedback),这些图标常靠右对齐。如果只清左 padding,右 padding 缺失会导致图标重叠或换行。
- 检查是否同时用了
.input-group—— 它内部的.input-group-text会挤压 input 宽度,此时清 padding 更容易导致文字截断 - 如果目标是「让输入内容贴边」,更健壮的做法是保留 padding,改
text-indent或用background-clip: padding-box控制背景绘制区域 - Chrome DevTools 里用「Computed」面板看最终 padding 值,有时框架组件(如 Vue 的
v-model封装)会注入额外样式干扰判断











