Bootstrap导航栏与Jumbotron间空白间隙，margin CSS无法解决

这个问题我之前也踩过坑！Bootstrap的组件自带了不少默认的间距和样式，光手动改margin确实容易踩空，咱们一步步来搞定它：

问题根源 #

你遇到的空白主要来自两个地方：

• Bootstrap的navbar默认带有底部外边距（比如mb-3），而jumbotron默认有顶部外边距（margin-top: 2rem），两者叠加就产生了间隙
• 你提到的border-radius会让jumbotron顶部有圆角，即使间隙消除了，视觉上也没法完全贴合导航栏

具体解决方案 #

1. 清除组件默认间距 #

直接用Bootstrap的内置间距类来移除多余外边距：

• 给navbar添加mb-0，彻底去掉它的底部外边距
• 给jumbotron添加mt-0，去掉它的顶部外边距

2. 移除Jumbotron的圆角 #

添加Bootstrap的rounded-0类，把jumbotron的圆角改成直角，这样就能和导航栏完全贴合

3. 处理边框（可选） #

如果你的导航栏加了border类，可能会出现细微的边框重叠或间隙，可以给导航栏加border-bottom-0，同时给jumbotron加border-top-0，避免重复边框

修改后的代码示例 #

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark border mb-0">
    <a class="navbar-brand" href="">Home</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <!-- 你的导航项内容 -->
      </div>
    </div>
  </nav>

  <div class="jumbotron mt-0 rounded-0">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  </div>
</div>

额外注意事项 #

如果你的Jumbotron是全屏宽度（不在.container内），那建议把导航栏也放在.container-fluid或者直接去掉容器，保证两者宽度一致，避免左右对齐问题，同时同样应用上面的间距和圆角类即可。

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