首页 > 解决方案 > 如何为活动的引导程序 4 导航栏项目添加背景颜色

问题描述

我正在尝试在此处为活动的 bootstrap 4 导航栏项目添加背景颜色。它部分应用。如何申请全高?我用过css,

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

标签: cssbootstrap-4

解决方案


该空间实际上是nav的元素填充。一种解决方案是消除顶部和底部填充。您可以通过将“ px-3 py-0 ”类添加到nav元素来使用Boostrap 的间距方法来执行此操作。

<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属性应调整为使文本居中。


推荐阅读