如何为活动的Bootstrap 4导航栏项添加背景色

Question

我正在尝试为活动的引导程序4导航栏项here添加背景色。它部分地适用。如何申请全高？ 我用css like

.active {
   background:rgba(165, 168, 168, 0.329);
}

Answer 1

该空间实际上是 nav 的元素填充。一种解决方案是消除顶部和底部填充。您可以使用Boostrap's spacing方法，通过向 nav 元素添加“ px-3 py-0 ”类来实现此目的。

<nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top px-3 py-0"></nav>

您可以将px从1设置为5。

此外，如果导航所需的高度相同，则可以为该高度添加一些额外的像素：

nav {
   height: 50px;
}

nav li a {
   height: 50px;
   line-height: 35px;
}

还应增加 a 的高度，以匹配 nav 的高度。 line-height 属性应调整为使文本居中。