如何消除Bootstrap中导航栏（nav）与jumbotron之间的空白间隙？

嘿，这个问题我之前折腾Bootstrap项目时也碰到过，默认样式的小坑确实挺闹心，咱们一步步捋清楚解决：

先搞定导航栏和Jumbotron之间的空白间隙 #

默认情况下，Bootstrap的.navbar类自带margin-bottom: 20px，而.jumbotron也有默认的margin-top: 30px，两者叠加就产生了你看到的空白。要消除这个间隙，直接覆盖navbar的底部外边距就行：

<style>
  /* 自定义类，移除navbar默认底部外边距 */
  .navbar-no-bottom-margin {
    margin-bottom: 0;
  }
  /* 保留你原来的样式 */
  .navbar .nav li.active a:hover{color:#51c3e1}
</style>

<!-- 在你的导航栏上追加这个自定义类 -->
<nav class="navbar navbar-inverse navbar-no-bottom-margin">
  <!-- 你的导航栏内容 -->
</nav>

<div class="jumbotron">
  <!-- Jumbotron内容 -->
</div>

这样就能精准消除间隙，还不会影响其他页面的navbar布局。

再解决navbar-fixed-top导致的遮挡问题 #

当给导航栏加上navbar-fixed-top后，它会脱离正常文档流固定在顶部，下面的Jumbotron会自动填充它原来的位置，自然就被遮挡了。核心解决思路是给页面内容预留出导航栏的高度：

方法1：给body添加顶部内边距（推荐） #

这个方法能让整个页面的内容都避开导航栏，不会只解决Jumbotron的局部问题：

<style>
  /* 预留导航栏高度：Bootstrap3默认是50px，Bootstrap4是56px，根据你的实际导航栏高度调整 */
  body {
    padding-top: 50px;
  }
  .navbar .nav li.active a:hover{color:#51c3e1}
</style>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <!-- 导航栏内容 -->
</nav>

<div class="jumbotron">
  <!-- 现在Jumbotron会从导航栏下方开始渲染，内容能正常居中显示 -->
</div>

方法2：给Jumbotron添加顶部外边距 #

如果你只想让Jumbotron避开导航栏，也可以直接给它加外边距：

.jumbotron {
  margin-top: 50px; /* 数值对应导航栏实际高度 */
}

关键注意点 #

如果你的导航栏是自定义高度（比如修改了内边距、字体大小），一定要把padding-top/margin-top的值改成导航栏的实际高度，不然还是会出现遮挡或者多余间隙。

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