直接设 line-height 会导致小屏导航错位，因其在折叠菜单中拉大 li 间距、对图片无效且与 Logo 高度冲突；d-flex 需谨慎用于子容器并配 height 和 vertical-align 才安全生效。
为什么直接设 line-height 会让导航链接在小屏错位
很多人一上来就给 .navbar 或 .navbar-nav 加 line-height，想靠行高“顶”起文字。但 Bootstrap 3 的响应式折叠菜单（.navbar-collapse）在移动端会展开为垂直堆叠的 <ul></ul>，此时 line-height 会作用在每个 <li> 上，导致菜单项间距异常拉大，甚至撑破容器。
- 只在桌面端生效的
line-height值，在@media (max-width: 767px)下会继承并破坏折叠菜单结构 -
line-height本质是文本基线控制，对图标、<img alt="Bootstrap导航栏Logo如何垂直居中_调整CSS的line-height或Flex对齐" >、<svg></svg>等非文本内容无统一效果 - 若 Logo 是
<img alt="Bootstrap导航栏Logo如何垂直居中_调整CSS的line-height或Flex对齐" >且高度 > 行高，父容器会按图片撑高，而文字仍按旧行高对齐，反而加剧偏移
d-flex align-items-center 在 Bootstrap 3 中怎么安全启用
Bootstrap 3 默认不带 d-flex 这类工具类，但你可以直接用原生 Flex 写法，无需升级框架。关键是避免破坏原有浮动布局逻辑 —— 尤其不能直接给 .navbar 加 display: flex，否则会干掉 .navbar-collapse 的 JS 折叠行为。
- 只对需要居中的子容器加 Flex，比如包裹 Logo 和导航链接的
<div class="navbar-header">，而不是整个 <code><nav class="navbar"></nav> - 必须同时设
height或min-height（如height: 60px），否则align-items-center因无交叉轴尺寸而失效 - 如果用了
<img alt="Bootstrap导航栏Logo如何垂直居中_调整CSS的line-height或Flex对齐" >作 Logo，记得加vertical-align: middle或height: 100%，否则图片默认 baseline 对齐会下沉 - 别在
.navbar-brand上直接写display: flex：它常含文字+图片混合，Flex 容器内若没约束宽度，可能触发换行或溢出 - 父元素是否真有
display: flex？检查 computed 样式里display是否被其他规则（比如!important或第三方插件 CSS）覆盖成block - 父容器有没有明确高度？
height: auto或min-height: unset会导致交叉轴无参考，align-items形同虚设 - 子元素自己有没有加
align-self: start或margin-top？这类声明优先级高于父级align-items，会强行把内容“拽”上去 - 打开 DevTools → Elements 面板，手动勾选/取消
.fixed-header-on，观察 Logo 是否实时重排 —— 不动说明样式没命中 - 优先用更稳的选择器，比如
.navbar.fixed-header-on .navbar-brand img，避免依赖某一层抽象类 - 收缩时高度变化，若用
margin-top手动调值，不同设备缩放下极易失准；改用transform: translateY(-50%)+top: 50%+position: relative更可靠
当 align-items-center 不生效时，先查这三处
不是类名拼错了，而是 Flex 居中依赖一组隐含前提。浏览器里 DevTools 看一眼就能定位问题：
收缩后 Logo 偏移？重点盯 .fixed-header-on 类的触发时机
很多项目用 JS 在滚动后给 或 <nav></nav> 动态加 .fixed-header-on，再靠这个类切换样式。但如果你的居中规则写成 .fixed-header-on .logo，而 JS 实际加的是 .fixed-header-on 到 <header></header> 上，选择器就完全不匹配。
立即学习“前端免费学习笔记（深入）”；
