如何消除Bootstrap v4.0导航栏折叠菜单与头部的间距

嘿，我来帮你搞定这个Bootstrap导航栏的间距问题！在v4.0版本里，小屏幕（md、sm尺寸）下导航栏和头部之间出现多余间距，大概率是默认样式或者自定义样式的margin/padding在搞鬼，咱们一步步排查解决：

1. 覆盖导航栏的默认底部间距 #

Bootstrap的navbar组件在部分断点下默认带有margin-bottom，你可以针对性地在小屏幕下去掉它：

/* 针对md及以下断点（因为navbar-expand-lg是992px以上才展开） */
@media (max-width: 991px) {
  .navbar {
    margin-bottom: 0;
  }
}

要是怕优先级不够，也可以给导航栏加个自定义类（比如no-nav-margin），然后写更精准的样式，避免用!important：

@media (max-width: 991px) {
  .navbar.no-nav-margin {
    margin-bottom: 0;
  }
}

记得把这个类加到你的HTML导航标签里：

<nav class="navbar navbar-expand-lg navbar-custom BKoodakBold no-nav-margin">

2. 检查头部元素的额外间距 #

如果导航栏本身没问题，那看看它上方的头部容器（比如header标签或者其他自定义头部元素），是不是在小屏幕下设置了margin-bottom或padding-bottom。用浏览器开发者工具（按F12）选中头部元素，查看它的盒模型，找到多余间距的来源，然后针对性清除：

@media (max-width: 991px) {
  .your-header-class { /* 替换成你头部元素的实际类名 */
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

3. 排查折叠导航栏的内部样式 #

当导航栏折叠时，navbar-collapse组件可能自带额外的margin/padding，你也可以检查这个元素：

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

4. 检查自定义样式的冲突 #

你自己定义的navbar-custom类里，有没有针对小屏幕的样式不小心加了多余的margin？仔细核对这个类的CSS代码，看看有没有在md/sm断点下的错误设置。

另外，浏览器开发者工具是最快定位问题的神器——切换到小屏幕预览模式，直接选中导航栏和头部之间的区域，就能看到是哪个元素的margin/padding导致了间距，精准修改就行！

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