navbarrap和jumbotron之间的空白间隙。 margin css无法解决问题

Question

在上面的照片中，您可以看到圈出的微量空白。在jumbotron元素上似乎还有一个border-radius，我试图让它显示没有任何间隙。下面是我的代码。

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark border">
    <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">
        <a class="nav-item nav-link active" href="#">About<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Portfolio</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">Contact</a>
      </div>
    </div>
  </nav>

  <div class="jumbotron image_test ">
    <h1 class="p-5 text-white">test</h1>
  </div>
</div>

我很感激任何帮助解决这个问题。我已经尝试将类的margin-bottom设置为0px ..并且它没有什么区别。

Answer 1

您在导航标记上有边框类，删除可能会解决问题并减少 border-radius <上的.jumbotron / p>

Answer 2

要删除jumbrotron上的舍入，请使用 rounded-0 ：

<div class="jumbotron image_test rounded-0"></div>

要删除导航栏中的空白，请使用 border-bottom-0 ：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark border border-bottom-0">
..
</nav>

要移除导航栏周围空白的所有，请移除 border 类：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
..
</nav>

https://www.codeply.com/go/PlPt1mLBfH