Bootstrap导航栏问题：本地CSS样式无法覆盖及导航栏与内容间隙移除

这问题我碰过好多次了——Bootstrap的内置样式经常因为选择器特异性更高，导致你写的.navbar样式压不住它。虽然你已经把本地CSS放在Bootstrap后面了（这步很对！），但还是得针对性调整，给你几个实用的解决思路：

1. 提升选择器的特异性 #

Bootstrap的导航栏样式往往用了更具体的选择器组合，比如.navbar.navbar-expand-lg或者.navbar-light这类多类组合，光用单个.navbar肯定干不过它。你可以：

• 给你的选择器加个父元素限定，比如body .navbar
• 或者直接复用Bootstrap的类组合，比如.navbar.navbar-expand-lg

举个实际例子：

/* 覆盖导航栏背景色 + 移除底部间隙 */
body .navbar.navbar-expand-lg {
  background-color: #2d3748; /* 你的自定义颜色 */
  margin-bottom: 0; /* 干掉默认的底部外边距 */
}

2. 排查间隙的真实来源 #

导航栏和内容的间隙不一定只来自导航栏本身：

• Bootstrap默认给.navbar加了margin-bottom: 1rem，这是最常见的原因
• 也可能是下方内容区域自带margin-top，比如.container或者你自己的内容容器

打开浏览器开发者工具（F12），选中导航栏和下方内容元素，看「样式」面板里的margin/padding属性，找到哪个属性在搞鬼，直接针对性覆盖就行。

3. 谨慎使用!important（万不得已再用） #

如果上面的方法都不管用，可以临时用!important强制覆盖，但尽量少用——它会打乱样式优先级，后期维护麻烦。比如：

.navbar {
  background-color: #2d3748 !important;
  margin-bottom: 0 !important;
}

4. 确认样式是否正确加载 #

有时候不是优先级问题，是你的CSS根本没加载！打开开发者工具的「网络」面板，刷新页面，看你的本地CSS文件是否成功加载，有没有404错误。另外也可以在样式里加个明显的属性（比如border: 2px solid red），看看导航栏有没有变红，确认样式是否生效。

最后再提个小技巧：用开发者工具的「元素」面板，找到导航栏元素，看Bootstrap的样式是哪个选择器生效的，直接复制那个选择器，在你的CSS里写同样的选择器（因为你的CSS在后面，就能覆盖）。比如Bootstrap用了.navbar-light .navbar-brand，那你就写同样的选择器来修改品牌文字样式。

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