如何在不覆盖.col-form-${size}-label的情况下重置Bootstrap表单标签字号？

方法1：修改Bootstrap内置CSS变量（推荐） #

Bootstrap 5.1为表单标签定义了专属CSS变量，直接修改这些变量就能全局调整字号，且不会干扰.col-form-${size}-label的尺寸相关样式：

:root {
  --bs-form-label-font-size: 1rem;
}

这个变量会被.form-label和.col-form-label继承，而.col-form-${size}-label仅调整padding、margin等尺寸属性，不会覆盖字号变量，完美解决冲突问题。

方法2：使用更精准的CSS选择器 #

如果不想用变量，可以通过精准选择器只匹配基础标签，避免覆盖尺寸变体：

/* 仅匹配基础form-label，不影响带尺寸后缀的变体 */
.form-label:not([class*="col-form-"]) {
  font-size: 1rem;
}
/* 仅匹配未带尺寸后缀的col-form-label */
.col-form-label:not([class*="-label-"]) {
  font-size: 1rem;
}

也可以通过父容器限定作用范围，比如只修改特定表单内的标签：

.custom-form .form-label,
.custom-form .col-form-label {
  font-size: 1rem;
}

给目标表单添加custom-form类即可，不会影响全局的尺寸变体标签。

方法3：通过Sass变量定制（若使用Sass编译Bootstrap） #

如果你是通过Sass引入Bootstrap源码定制，可以直接修改对应Sass变量，重新编译后生效：

$form-label-font-size: 1rem;

// 引入Bootstrap Sass文件
@import "bootstrap";

这种方式从源头修改样式，生成的CSS会自动应用到所有相关标签，且不会破坏尺寸变体的原有样式。

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