Bootstrap菜单与下方Div之间存在间距问题求助

嘿，我帮你排查了这个问题～你遇到的菜单和下方Div之间的多余间距，根源是Bootstrap的.navbar组件默认自带了margin-bottom: 20px的样式，这就是导致两者之间出现空隙的原因。

这里给你两种简单的解决方法：

• 方法一：给navbar添加自定义类取消底部外边距
  首先给你的navbar标签加一个自定义类，比如no-navbar-margin：

  <nav class="navbar navbar-default no-navbar-margin" role="navigation">
    <!-- 菜单内容 -->
  </nav>
  

  然后在CSS里添加对应的样式：

  .no-navbar-margin {
    margin-bottom: 0;
  }
  

  要是遇到样式优先级不够的情况，再加个!important强制覆盖默认样式就行：

  .no-navbar-margin {
    margin-bottom: 0 !important;
  }
  

• 方法二：直接修改全局navbar样式（不推荐）
  如果你想让所有navbar都取消底部间距，可以直接覆盖Bootstrap的默认样式，但这种方法会影响全局的navbar组件，所以只在你确定所有场景都不需要这个间距时使用：

  .navbar {
    margin-bottom: 0;
  }
  

另外，你也可以检查一下下方的Div有没有自带的margin-top样式，如果有的话也需要对应调整，不过大多数情况下，解决navbar的margin-bottom就足够消除这个多余间距啦。

内容的提问来源于stack exchange，提问作者Jakub Menšík