在 Bootstrap 4 中，如何消除导航栏和切换菜单项之间的间隙？答案

【问题标题】：In Bootstrap 4, How to remove the gap between navbar and toggle menu item?在 Bootstrap 4 中，如何消除导航栏和切换菜单项之间的间隙？
【发布时间】：2018-10-07 07:55:26
【问题描述】：

在 Bootstrap 4 中，有默认的导航栏模板。我用它来学习，但是，当我尝试修改或设置 CSS 样式时，我快疯了。我不明白是什么导致了导航栏和切换菜单项之间的差距？

我正在尝试消除差距，但是，很难实现，我正在寻找什么。这是图片：Gap-img

<html>

<head> </head>

<body>
  <nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top" role = "navigation">
    <div class="navbar-header">   
<a class="navbar-brand" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Boostrap_logo.svg" width="22" height="22" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!--         <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-x"> -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="dropdown-divider"></li>
        <li class="nav-item"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <section>
    <div class="container">
      <div id="about">
        <h1>My title</h1>
        <p>Hello World. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium error tempore voluptas iusto. Deleniti impedit repellendus mollitia ad, repudiandae ab fugit ipsa in laboriosam culpa, aspernatur amet quo modi possimus.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ea assumenda, soluta natus culpa debitis perspiciatis repudiandae doloremque eum repellendus fugiat corrupti aspernatur accusamus neque laborum totam voluptates error possimus.</p>
      </div>
    </div>
  </section>

</body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</html>`




.navbar-collapse {
  border: 0;
  -webkit-box-shadow: none;
}

.nav-item{
   height:49px;
      margin-top: 0px;
      margin-bottom: 0px;
        padding-top:0px;
        padding-bottom:0px;
}

/*  */
.navbar-default,
.navbar-inverse {
  /* SET color for top bar*/
  background-color: darkblue;
  margin-bottom:20px;
}

.navbar-toggle {
  border: 0px;
  border-radius: 0px;
  padding: 18px;
  margin: 0px;
  background-color: rgba(0, 0,200, 0.5);
  outline: none;
}

.navbar-toggle .icon-bar:nth-of-type(1) {
  height: 2px;
  top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  height: 2px;
  top: 0.9px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  height: 2px;
  top: 0.7px;
}

有人可以帮帮我吗？

【问题讨论】：

此时您尝试了什么？
您能否分享您的所有代码，最好是在 JSFiddle 或 Codepen 中？
自定义 CSS 导致它。
对不起，我是论坛的新手。请在此处找到编码：codepen.io/vino3d/pen/erdzvO
navbar-toggle 应该是 navbar-toggler 才能在 Bootstrap 上工作。

标签： css bootstrap-4 navbar

【解决方案1】：

我查看了您的 Codepen，似乎您的 ul 的 top 和 bottom 边距为 7.5px，请将以下规则放入您的代码中将删除它。第二个值（left 和 right 边距）将保持大小足够长，因此当您悬停时，整个区域的背景颜色都会改变，而不仅仅是部分区域它。如果您不明白我的意思，请尝试将所有边的边距设为 0 以查看差异。

CSS

.navbar-nav {
  margin: 0px -15px;
}

【讨论】：

哇.. 它帮助了我。感谢您。很长一段时间我都没有注意到父 div。
我很高兴 :) 下次您可以使用 Chrome 开发工具 (Ctrl + Shift + I) 并检查页面上的元素以查看额外的 padding 或 margin 来自。您能否将我的答案标记为解决方案，以便其他人可以看到？谢谢！
再次感谢。你真的很高兴能帮助像我这样的人。我确实检查过，但找不到自己，这就是为什么。在论坛中提问。