bootstrap 5中a.nav-link字号不生效主因是css特异性不足，需用.navbar-nav .nav-link等更高权重选择器覆盖，默认值为0.875rem；建议优先用px单位并检查折叠菜单和下拉项样式。
Bootstrap 5 导航栏里 a.nav-link 字号不生效？优先检查 CSS 特异性
直接改 font-size 没反应，大概率是 Bootstrap 自带样式权重更高。默认的 .nav-link 在 bootstrap.min.css 中被定义为 font-size: 0.875rem（即 14px），且带 :hover、:focus 等多层规则。
实操建议：
- 用浏览器开发者工具（F12）点中导航链接，看「Computed」面板里
font-size被哪条规则覆盖，重点盯nav-link和navbar-nav相关选择器 - 不要只写
a.nav-link { font-size: 16px; }—— 它会被.navbar-nav .nav-link这类更具体的选择器压住 - 稳妥写法是提升特异性：比如
.navbar-nav .nav-link { font-size: 1rem; }或加!important（仅调试时用，上线前应避免）
用 rem 还是 px？取决于你是否改过根字体大小
Bootstrap 5 默认基于 html { font-size: 16px; }，所以 1rem = 16px。但如果你在全局 CSS 里改过 html 的 font-size（比如设成 62.5% 为了方便 em 计算），那所有 rem 值都会跟着变。
实操建议：
- 想稳定控制字号，优先用
px（如font-size: 18px;），尤其在小范围定制时，避免意外缩放 - 若坚持用
rem，确认html根尺寸未被第三方样式或 JS 动态修改（常见于某些 UI 库或移动端适配脚本） - 响应式场景下，可结合
@media分别设不同断点的font-size，比如@media (max-width: 768px) { .navbar-nav .nav-link { font-size: 1rem; } }
自定义 SCSS 变量（仅限源码编译场景）
如果你用的是 Bootstrap 源码（bootstrap.scss）而非 CDN 的压缩版，最干净的方式是覆盖变量，而不是写额外 CSS。
实操建议：
- 在引入 Bootstrap 前，重定义
$nav-link-font-size变量，例如：$nav-link-font-size: 1.125rem;<br>@import "bootstrap/scss/bootstrap";
- 注意：这个变量只影响
.nav-link，不影响.navbar-brand（它用的是$navbar-brand-font-size） - 变量名必须拼写准确，Bootstrap 5 中没有
$navbar-link-font-size这种别名，查文档确认为准
移动端折叠菜单（.navbar-toggler）里的文字也变小了？别漏掉它
很多人只调了桌面端导航，结果点开手机上的三横线菜单，里面文字还是默认大小 —— 因为折叠后的内容在 .navbar-collapse 内，其内部链接仍走独立样式流。
实操建议：
- 折叠菜单内的链接同样属于
.nav-link，但父容器是.navbar-collapse，所以需要显式覆盖：.navbar-collapse .nav-link { font-size: 1rem; } - 如果用了
.dropdown-item下拉项，也要单独处理：.dropdown-item { font-size: 0.95rem; } - 真机测试很重要：iOS Safari 对
font-size小于 16px 的文本有自动放大行为，可能让字号“看起来”不对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
