bootstrap 5 折叠状态下需用媒体查询重置 .navbar-brand 的 font-size 和 padding，同步调整避免文字截断；logo 图片应设 max-height 并配 height: auto；居中需 text-align: center + display: block；.navbar-brand 必须置于 .navbar-collapse 内。
折叠状态下 .navbar-brand 的 font-size 和 padding 必须重置
Bootstrap 5 在视口宽度 ≤991.98px（即 lg 断点以下）时，会把 .navbar-brand 放入 .navbar-collapse 内部，并强制应用 font-size: 1.25rem 和压缩的 padding-top/padding-bottom。这不是“缩放”，而是 CSS 规则切换导致的视觉变小。
直接覆盖需用媒体查询 + 更高优先级：
-
@media (max-width: 991.98px)是精准匹配 Bootstrap 的lg下限，避免与桌面样式冲突 -
.navbar-brand { font-size: 1.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }——font-size和padding必须同步调大，否则文字会被截断或贴边 - 若只改
font-size不动padding，折叠后导航栏高度仍被压扁，文字顶部/底部可能溢出
图片 Logo 在折叠态需控制 max-height 而非 height
用 <img> 做品牌标识时，height 固定值会破坏响应式比例，而 max-height 才是安全选择。
-
.navbar-brand img { max-height: 2rem; }用于桌面；折叠态加媒体查询：@media (max-width: 991.98px) { .navbar-brand img { max-height: 1.75rem; } } - 必须同时声明
height: auto，否则图片会被拉伸变形 - 别用
width: 100%或object-fit直接作用于.navbar-brand img—— 容易撑开.navbar高度，尤其在 iOS Safari 中触发意外滚动条
折叠态 Logo 居中失效？别依赖 mx-auto
mx-auto 在折叠展开后（.navbar-collapse.show）自动失效，因为此时布局变为垂直流式，flex 项不再横向排列。
- 折叠态下想居中 Logo，得单独写媒体查询：
@media (max-width: 991.98px) { .navbar-brand { display: block; text-align: center; } } - 如果用了
flex布局（如justify-content-center），d-none d-md-block类会导致元素移除，破坏 flex 计算 —— 此时居中会偏移 - 更稳妥的做法：折叠态下用
text-align: center+display: block，不依赖 flex 行为
Logo 和导航项不同步隐藏？检查是否在 .navbar-collapse 内
如果 Logo 在小屏始终可见，但导航项进了汉堡菜单，说明 .navbar-brand 没放进 .navbar-collapse 容器里。
- Bootstrap 的折叠逻辑只对
.navbar-collapse内部内容生效，外部.navbar-brand会一直渲染 - 正确结构是：
<div class="collapse navbar-collapse" id="navbarNav"> <a class="navbar-brand">Logo</a><ul class="navbar-nav">...</ul> </div> - 不要把
.navbar-brand写在.navbar-collapse外再靠d-none d-md-block控制显隐 —— 这样它不会随菜单收起，点击后视觉割裂感强
.navbar-brand 自身的尺寸、留白和定位方式。任何试图绕过 .navbar-collapse 的强行撑高、移出或 JS 干预，都会在真机上暴露兼容性问题。
