Navbar移动端Logo变小是因Bootstrap 5在<992px时折叠并重设.navbar-brand的font-size和padding；需用@media(max-width:991.98px)配合!important或更具体选择器覆盖font-size与padding，img则需同步设置max-height及height:auto。
Navbar品牌Logo在移动端变小是因为Bootstrap默认的折叠逻辑
bootstrap 5 的 navbar 在视口宽度小于 lg（992px）时会触发折叠，此时 .navbar-brand 会被套进 .navbar-collapse 内部，而默认样式对折叠状态下的 .navbar-brand 施加了 font-size: 1.25rem 和更紧凑的内边距 —— 这就是 logo 看起来“突然变小”的直接原因，并非缩放或响应式重绘，而是 css 规则切换。
覆盖移动端 .navbar-brand 的 font-size 和 padding
最直接有效的方式是用媒体查询针对性重置折叠态下的样式。注意必须比 Bootstrap 原生规则优先级更高（例如加 !important 或用更具体的选择器）：
@media (max-width: 991.98px) {
.navbar-brand {
font-size: 1.5rem !important;
padding-top: 0.375rem !important;
padding-bottom: 0.375rem !important;
}
}
- 用
max-width: 991.98px精准匹配 Bootstrap 的lg断点下限（避免和lg本身重叠） -
font-size改为你要的实际值，比如1.5rem或24px；rem更利于缩放一致性 -
padding必须同步调大，否则文字会贴边甚至被截断 —— 折叠后.navbar高度变矮，原始 padding 会被压缩
如果用了 img 标签作为 Logo，记得设置 max-height
纯文本 .navbar-brand 只调 font-size 就够了；但如果你用的是 <img>，它默认按原始尺寸渲染，容易撑高导航栏或溢出：
.navbar-brand img {
max-height: 2rem;
}
@media (max-width: 991.98px) {
.navbar-brand img {
max-height: 1.75rem;
}
}
-
max-height比height更安全，能保持宽高比 - 移动端值建议略小于桌面端（如
1.75remvs2rem），避免和折叠按钮抢空间 - 别忘了给
img加height: auto防止拉伸变形
避免用 navbar-toggler-left / flexbox 强行“撑开”高度
有人尝试给 .navbar-collapse 加 min-height，或把 .navbar-brand 提到折叠外层，这类做法会破坏 Bootstrap 的折叠逻辑：
- 折叠菜单展开后，
.navbar高度突变，造成视觉跳动 -
navbar-toggler和.navbar-brand的垂直对齐可能错乱 - 在 Safari iOS 上容易触发意外的滚动条或渲染异常
真正可控的方式只有：接受折叠态的结构，只改 .navbar-brand 自身的尺寸与留白。
最易被忽略的是 padding 同步调整 —— 很多人只改 font-size，结果文字顶到折叠按钮底部，或者上下发虚，其实只是内边距没跟上。
