Bootstrap导航标签（Navtabs）自定义：移除边框与配色问题求助

以下是完整的CSS代码，可直接替换你现有样式，实现目标效果：

/* 移除导航栏容器的默认底部边框 */
.nav-tabs {
  border-bottom: none;
  text-align: center;
}

/* 统一导航链接基础样式 */
.nav-tabs .nav-link {
  border: none; /* 移除默认边框 */
  border-radius: 0; /* 取消圆角 */
  font-family: 'Remora', sans-serif;
  color: #666; /* 未激活状态文字颜色，可按需修改 */
  position: relative; /* 为下划线定位 */
  padding: 0.5rem 1rem; /* 调整内边距适配布局 */
  background-color: transparent; /* 移除默认背景色 */
}

/* 移除链接聚焦/点击时的默认轮廓 */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:active {
  outline: none;
  box-shadow: none;
}

/* 激活状态文字样式 */
.nav-tabs .nav-link.active {
  color: #222; /* 激活状态文字颜色，可按需修改 */
  background-color: transparent; /* 移除激活状态默认背景色 */
}

/* 为激活标签添加底部下划线 */
.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -5px; /* 调整下划线与文字的间距 */
  left: 0;
  width: 100%;
  height: 2px; /* 下划线厚度 */
  background-color: #222; /* 下划线颜色，可按需修改 */
}

/* 匹配目标效果的标签对齐方式 */
.nav-tabs .nav-item:first-child .nav-link {
  text-align: right;
  padding-right: 30px;
}

.nav-tabs .nav-item:last-child .nav-link {
  text-align: left;
  padding-left: 30px;
}

说明： #

1. 彻底移除了.nav-tabs默认底部边框和.nav-link的所有边框样式，解决边框残留问题。
2. 通过伪元素::after为激活标签添加底部下划线，完全匹配目标效果的分隔样式。
3. 统一了文字字体与配色，你可直接修改color、background-color的值自定义配色方案。
4. 将HTML内联的对齐样式迁移到CSS中，保持代码结构整洁（若需保留内联样式，可忽略最后两段CSS）。

你的HTML结构无需修改，直接应用上述CSS即可实现目标效果。

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