Bootstrap 4导航栏顶部空白去除问题求助
2026-5-26
刚遇到过类似的问题！导航栏上方的空白大概率是浏览器或Bootstrap的默认样式搞的鬼，我来帮你拆解排查，一步步解决：
可能的原因&对应解决方法
1. 清除<body>的默认外边距
浏览器本身会给<body>设置margin: 8px，这是最常见的顶部空白来源。直接在你的自定义CSS里覆盖这个默认样式：
body { margin: 0; }
2. 移除.row的默认顶部间距
你给外层容器用了Bootstrap的.row类，它默认带有负边距，有时候会和父元素的布局冲突产生空白。可以给这个特定的.row添加自定义样式清除顶部margin：
.site-hero { margin-top: 0 !important; }
（这里用!important是为了确保覆盖Bootstrap的默认样式，如果你有更优先级高的CSS选择器，也可以不用）
3. 检查导航栏自身的内/外边距
你的导航栏用了自定义类nomergy-nav，同时Bootstrap的.navbar本身也有默认的内边距。可以针对性调整：
.nomergy-nav { padding-top: 0; padding-bottom: 0; margin-top: 0; }
4. 用开发者工具精准定位
最快的方法是按F12打开浏览器开发者工具，选中顶部的空白区域，在「Elements」面板里查看这个空白对应的margin/padding来自哪个元素——把鼠标悬停在各个父元素上，就能直观看到哪个元素的间距导致了问题，再针对性修改样式就好。
内容的提问来源于stack exchange，提问作者iLC
