bootstrap 4 中 label 默认 margin-bottom: .5rem 是与下方控件空隙主因；安全修改方式有三：优先用外层容器加 mb-0，其次局部覆盖如 .my-form .form-label，最后响应式微调；还需注意 form-control 的 margin-top 和 form-text 的 margin-top 叠加影响。
label 在 Bootstrap 4 中默认有 margin-bottom: .5rem（即 8px），这是它和下方控件之间空隙的主要来源。直接改这个值可行，但得避开几个常见误操作点。
为什么改了 margin-bottom 却没生效
典型原因不是 CSS 写错了，而是类名挂错位置或特异性不足：
- 把
mb-0加在<label class="form-label mb-0"></label>上——这本身没错，但若你同时用了自定义 SCSS 并重写了$spacer变量却没重新编译 CSS，mb-0实际可能不等于0 - 在全局样式里写
label { margin-bottom: 0 !important; }——会污染所有label，包括非表单场景（比如文章段落里的<label></label>） - Bootstrap 4 的
.form-label类权重比普通label高，只写label { margin-bottom: 0; }会被覆盖
安全修改 margin-bottom 的三种方式
优先按顺序尝试，越靠前越推荐：
- 用工具类：给
<label></label>外层容器加mb-0，比如<div class="mb-0"><label class="form-label">用户名</label></div>——这样不碰label本身，也避免影响其他地方 - 局部覆盖：写
.my-form .form-label { margin-bottom: .25rem; }，其中.my-form是你表单的自定义 class，确保选择器足够具体 - 响应式微调：需要移动端更紧凑？用
.form-label { margin-bottom: .25rem; } @media (min-width: 768px) { .form-label { margin-bottom: .5rem; } }
form-label 和 form-control 之间的间距是两层叠加
别只盯着 label 的 margin-bottom。Bootstrap 4 默认还给 .form-control 设了 margin-top: .25rem（部分版本），这意味着实际空隙 = label 的 margin-bottom + input 的 margin-top。如果想精确控制总间隙为 6px，得同步处理两者：
- 清掉
input的上边距：.form-control { margin-top: 0; } - 再单独设
label的底部边距：.form-label { margin-bottom: .375rem; }（即 6px） - 或者更省事：统一由父容器承载，比如
<div class="mb-2"> <label>...</label><input> </div>，让mb-2管全部
最易被忽略的是：当 label 后紧跟 <small class="form-text"></small> 时，它的 margin-top: .25rem 会额外叠加——这时候只调 label 的 margin-bottom 依然不够，得一并处理 form-text 的 mt-0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
