如何让Bootstrap导航栏激活标签高度大于其他标签？

要实现激活标签高度略高于其他标签的效果，只需调整激活状态下导航标签的定位、高度与边框样式，替换你原有CSS代码为以下内容即可：

/* 统一设置所有导航标签的基础样式，保证整体对齐 */
.nav-tabs .nav-link {
  height: 20px; /* 非激活标签的基础高度 */
  margin-top: 2px; /* 预留激活标签上移的空间 */
  border: 1px solid #c6c6c6;
  border-bottom: none;
  transition: all 0.2s ease; /* 可选：添加切换时的平滑动画 */
}

/* 激活状态标签的样式 */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #050505;
  background-color: #f9f9f9;
  height: 24px; /* 比非激活标签高4px，实现突出效果 */
  margin-top: 0; /* 上移标签，让顶部超出其他标签 */
  border: 1px solid #c6c6c6;
  border-bottom: 1px solid #f9f9f9; /* 底部边框与背景色一致，避免和下方内容区域边框冲突 */
}

/* 调整导航容器的底部边框，保证整体视觉连贯 */
.nav-tabs {
  border-bottom: 1px solid #c6c6c6;
}

关键逻辑说明： #

1. 先统一非激活标签的高度和顶部外边距，为激活标签的突出预留空间
2. 激活标签通过增加高度+移除顶部外边距实现向上突出的视觉效果
3. 修改激活标签的底部边框颜色，避免和下方内容区域的边框重叠，保证整体视觉连贯

你的HTML代码无需修改，直接搭配上述CSS即可实现预期效果。

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