导航栏链接的背景颜色

Question

我已经定义了Navbar，它工作得很好，除了我也想给Navbar链接提供整页背景。当前，当我要在移动设备上打开页面时，链接背景不会水平覆盖整个页面，而是看起来像是突出显示的线条。有关更多详细信息，请参见屏幕截图。如果有人可以帮助我，我将不胜感激。谢谢！

<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
  <a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
  <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="collapsingNavbar4">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div2" class="navbaritems">About</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div3" class="navbaritems">Contact</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div4" class="navbaritems">Resume</a>
      </li>
    </ul>

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a href="mailto:abdullah.ameenn@gmail.com" target="_blank"><img src="img/email.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
      <li class="nav-item active">
        <a href="https://www.linkedin.com/in/abdullahameen/" target="_blank"><img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
      <li class="nav-item active">
        <a href="https://twitter.com/AbdullahAmeenn?lang=en" target="_blank"><img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
    </ul>
  </div>[![enter image description here][1]][1]
</nav>

Answer 1

您可以尝试以下方法：

<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">

Answer 2

尝试添加以下样式：

.navbar.scrolled .navbar-collapse{
    background: #116980;
    margin: -15px;
    padding: 15px;
    z-index: -1;
}

当向下滚动时，以上几行将为.navbar-collapse分配背景色。但是，由于.navbar-collapse包含边距，因此上述代码会删除边距并将其更改为填充，同时将.navbar-collapse移至后退以防止覆盖.navbar-brand和.navbar-toggler。