Question

使用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;
}

有人可以帮帮我吗？

Answer 1

我查看了您的Codepen，似乎您的ul的顶部和底部边距7.5px，请将以下规则放入你的代码，它将删除它。第二个值（左和右边距）将保持足够长的尺寸，因此当您悬停时，整个区域的背景颜色会发生变化，而不仅仅是它。如果您不知道我的意思，请尝试所有方面的0保证金以查看差异。

CSS

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

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

1 个答案: