直接改.nav-link文字颜色无效，因bootstrap 5默认使用高权重选择器如a.nav-link[href]，需同步覆盖.nav-link、:hover、:focus及.nav-item.active .nav-link四个状态。
直接改 .nav-link 文字颜色为什么没反应
不是选择器写错了，是 Bootstrap 5 默认用 a.nav-link[href] 这类带属性的选择器，权重比单纯写 .nav-link 高。你在 DevTools 里看到样式被划掉，基本就是这个原因。别急着加 !important——它可能压住默认色，但压不住 :hover、:focus 和 .active 状态，结果鼠标一移就跳回蓝色。
必须同时覆盖的四个状态
漏掉任意一个，标签页交互就会视觉断裂。重点不是“怎么写”，而是“写全哪几个”：
-
.my-tabs .nav-link：默认文字色、字体粗细、行高 -
.my-tabs .nav-link:hover：悬停时同步变色，别只调 color 不调 text-decoration -
.my-tabs .nav-item.active .nav-link：注意是.nav-item上有active类，不是.nav-link.active -
.my-tabs .nav-link:focus：键盘用户依赖这个，建议用box-shadow替代 outline，别直接outline: none
标题居中或右对齐怎么不破坏布局
.nav 是 flex 容器，默认 justify-content: flex-start。想居中不能只给 .nav-link 加 text-align: center——它在 flex 里无效。正确做法是：
- 居中：给父容器（如
.nav或外层.nav-tabs）加justify-content: center - 右对齐：给
.nav-link加margin-left: auto，比text-align更可靠 - 响应式要注意：
sm断点以下，.nav可能变成 column 布局，justify-content方向会失效，务必在手机尺寸下实测
副标题或图标混排时容易踩的坑
Bootstrap 允许在 .nav-link 里放 <small></small> 或 <i></i>，但它们默认继承父级字号和颜色，问题常出在这几处：
- 主标题加了
font-weight: 600，<small></small>也跟着加粗——需单独设.nav-link small { font-weight: normal; } -
<small></small>的font-size是相对.nav-link计算的，改主标题字号后，副标题实际大小会变，得同步调font-size - 图标用
font-awesome或bootstrap-icons时，如果没设vertical-align: middle，文字会和图标上下错位 - 禁用态（
.nav-item.disabled .nav-link）常被忽略，但标签页灰掉时用户需要明确感知，建议显式定义color和cursor: not-allowed
最易被忽略的是 aria-current="page" 和 tabindex 的语义一致性——样式再漂亮，焦点跳转错乱或读屏器读不出当前页，对部分用户就是不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
