如何让Bootstrap导航栏内的container-fluid与导航栏等高，使链接hover阴影正常显示

问题根因 #

Bootstrap 默认给 .navbar 类设置了上下内边距，内部的 .container-fluid 的高度百分比是基于导航栏 padding 包裹的内容区计算，所以就算设置 h-100 也只会撑满内容区高度，始终比导航栏总高度小。

解决方案（均保留Bootstrap原生响应式汉堡菜单功能） #

方案1：调整阴影实现逻辑（更推荐，侵入性最小） #

不需要修改容器高度，直接用绝对定位的伪元素实现阴影，对齐导航栏底部即可：

1. 给导航栏添加相对定位属性：

.navbar {
  position: relative;
}

2. 给导航链接添加悬停伪元素样式：

.navbar .nav-link {
  position: relative;
}
/* 悬停底部阴影效果 */
.navbar .nav-link:hover::after {
  content: "";
  position: absolute;
  left: 0;
  /* 数值等于navbar的padding-bottom值，可根据实际自定义调整 */
  bottom: -0.5rem;
  width: 100%;
  height: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

方案2：让container-fluid撑满导航栏总高度 #

如果需要容器和导航栏高度完全一致，可以通过负边距抵消导航栏的内边距影响：

.navbar > .container-fluid {
  /* 负边距抵消navbar上下padding */
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  /* 给容器加同等内边距，保证内容位置和原来一致 */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  height: 100%;
}

上述代码中的0.5rem是Bootstrap默认导航栏的上下padding值，如果你自行修改过导航栏的内边距，对应调整数值即可。修改完成后，你给链接设置的底部阴影就可以对齐容器底部，也就是导航栏的底部。

内容的提问来源于stack exchange，提问作者valeriova96