Html 引导4导航栏更改

这些问题可能真的很简单，但它让我有点困惑于CSS

如何使绿色背景（导航项目悬停时）占据导航栏的全部高度

此外，当导航栏折叠（对于小型/移动屏幕）时，如何将导航项目文本居中并为导航项目添加边框底部

这是我的HTML

<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">
         <img src="img/logo-design-new.png" alt="JDC Support" style="width: 40px;" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="about">About</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="photos">Photos</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="collections">Collections</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="careers">Careers</a>
            </li>
            <li class="nav-item mr-4 mb-2 mb-lg-0">
              <a class="nav-link" href="contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

这里有一个抢夺者；

---

首先，您需要在

引导js

之前添加

jquery

，并根据需要添加此自定义

css

/*样式在这里*/
.导航栏海关{
背景色：#fff！重要；
边框底部：2个实心#F1F1！重要；
}
/*更改活动链接或悬停链接的颜色*/
.navbar自定义.容器流体.nav-item.active.导航链接，
.导航栏自定义.容器流体.导航项：悬停.导航链接{
颜色：#ffffff；
背景色：绿色；/*将背景色添加到活动链接*/
}

.导航栏海关{
填充顶部：0rem；
填充底部：0rem；
}
.导航链路{
显示：块；
填充：1rem1rem；
}
@介质（最大宽度：991px）{
.导航栏海关{
垫面：0.5雷姆；
垫底：0.5雷姆；
}
.导航链路{
显示：块；
填充：0.5雷姆1雷姆；
} 
.导航栏灯.导航栏导航.导航链接{
文本对齐：居中；
}
.导航栏灯.导航栏导航.导航项目{
边框底部：5px实心#000000；
}
}

您可以在下面的代码中使用导航项目悬停和文本中心nad boredr bottom，用于小型/移动屏幕

.nav-item:hover{
  background-color:green;
}
.collapse.show{
  text-align:center;

}
.collapse.show .nav-item{
  border-bottom:1px solid black;
}

---

请为此显示此链接

尝试使用此选项更改css

<style>
.navbar-custom {
    background-color: #fff !important;
    border-bottom: 2px solid #f1f1f1 !important;
    padding:0px;
    margin:0px;
  }

.navbar-custom .container-fluid .nav-item.active .nav-link,
.navbar-custom .container-fluid .nav-item:hover .nav-link {
      color: #ffffff;
      background-color: green; 
      border:2px solid green;

  }
#navbarToggler.show{
  text-align:center;
}
#navbarToggler.show 
.nav-item{
  border-bottom:1px solid gray;
}
</style>

.导航栏海关{
背景色：#fff！重要；
边框底部：2个实心#F1F1！重要；
填充：0px；
边际：0px；
}
.navbar自定义.容器流体.nav-item.active.导航链接，
.导航栏自定义.容器流体.导航项：悬停.导航链接{
颜色：#ffffff；
背景颜色：绿色；
边框：2倍纯绿；
}
#纳瓦巴托格勒秀{
文本对齐：居中；
}
#纳瓦巴托格勒秀
.导航项目{
边框底部：1px纯色灰色；
}

此答案没有使绿色背景成为导航栏的“全高”（对于大屏幕）。此答案打破了导航栏当前的填充/样式（例如，徽标现在完全左对齐在屏幕边缘）导航栏的CSS不起作用（&C）。这是最接近可行的答案~但与以前的所有答案一样，它打破了导航栏的当前布局/填充，您能给我一个将li更改为ul的示例吗？我不能确切地拥有一个菜单，如关于某个东西的菜单，键入时出错，需要删除父类navbar custom的填充，并将额外的0.5 rem填充添加到.nav链接以实现全高度悬停

<style>
.navbar-custom {
    background-color: #fff !important;
    border-bottom: 2px solid #f1f1f1 !important;
    padding:0px;
    margin:0px;
  }

.navbar-custom .container-fluid .nav-item.active .nav-link,
.navbar-custom .container-fluid .nav-item:hover .nav-link {
      color: #ffffff;
      background-color: green; 
      border:2px solid green;

  }
#navbarToggler.show{
  text-align:center;
}
#navbarToggler.show 
.nav-item{
  border-bottom:1px solid gray;
}
</style>