最稳妥方式是用具体选择器覆盖 .navbar-light .navbar-brand 和 .navbar-dark .navbar-brand 的 font-size,确保自定义 CSS 在 Bootstrap 后加载,避免 !important;.nav-link 需显式设置 .navbar .nav-link { font-size: 0.9375rem; line-height: 1.4; } 并兼顾折叠状态。

直接改 :root 的 font-size 是最稳妥的全局方案,但 Navbar 品牌文字和菜单项往往需要单独微调——因为它们受不同 CSS 规则控制,且容易被 .navbar-light 或 .navbar-dark 的预设样式覆盖。
Navbar 品牌文字(.navbar-brand)怎么调大小
品牌文字默认由 .navbar-brand 控制,但它本身不带固定字号,而是继承自 :root 的 font-size 和 Bootstrap 的 --bs-navbar-brand-font-size 变量(v5.3+)。常见失效原因是选择器权重不够或加载顺序错。
- 优先用具体选择器覆盖,比如
.navbar .navbar-brand或.navbar-light .navbar-brand,避免只写.navbar-brand - 如果用了
.navbar-light,它自带color: rgba(0, 0, 0, 0.9)但没设font-size;而.navbar-dark同样不设字号,所以两者都得一并声明 - 不要依赖
!important:写.navbar-light .navbar-brand { font-size: 1.375rem; }就够,前提是你的 CSS 在bootstrap.min.css之后加载 - 示例:
.navbar-light .navbar-brand,<br>.navbar-dark .navbar-brand {<br> font-size: 1.375rem;<br>}
导航菜单项(.nav-link)字体怎么统一改
.nav-link 默认没有显式 font-size,它靠继承和行高撑开,实际大小取决于父容器的 font-size 和 line-height。想精准控制,必须显式设置,否则响应式折叠后可能失真。
-
.nav-link在.navbar-nav内,而后者在.navbar中,所以.navbar .nav-link比单纯.nav-link优先级更高 - 若启用了
.navbar-expand-lg,小屏下菜单收进折叠按钮,此时.navbar-toggler和展开后的.dropdown-menu里的链接需额外处理 - 推荐写法:
.navbar .nav-link {<br> font-size: 0.9375rem; /* ≈15px */<br> line-height: 1.4;<br>} - 注意:Bootstrap 5.3+ 提供了
fs-*类(如fs-sm-5),但它们对.nav-link无效——因为.nav-link有自身 padding 和 display 设置,fs-*只改font-size,易导致文字上下偏移
为什么改了 :root font-size 但 Navbar 文字没变
不是代码没生效,而是 Navbar 组件内部部分样式绕过了根字号缩放逻辑。例如 .navbar-brand 的字号在 v5.3 之前是硬编码 1.25rem,而 v5.3+ 引入了 --bs-navbar-brand-font-size 变量,但该变量默认值仍是 1.25rem,不会自动随 :root 变化。
- 检查 DevTools → Computed → font-size,确认最终计算值是否真的变了;如果还是
20px,说明你写的规则被覆盖了 - 如果你用了 Sass 编译,别只改
$font-size-base却忘了同步重定义$navbar-brand-font-size,否则编译出的 CSS 里.navbar-brand还是写死的 rem 值 -
.navbar-text容易被忽略:它和.navbar-brand并列,但默认字号是0.875rem,且无变量控制,必须单独覆盖 - 媒体查询里调整 Navbar 字体时,别只写
@media (max-width: 992px),要确保选择器能命中折叠后的.navbar-collapse .nav-link,否则小屏下反而回退到默认大小
真正卡住人的,往往是没分清「品牌文字」「菜单链接」「辅助文本」三者背后的样式来源——它们看起来都在 Navbar 里,但受控于完全不同的 CSS 规则链,混在一起改只会互相覆盖。


















