Bootstrap navbar-brand添加logo后导航项错位修复方法

• Logo图片设置了width="20%"的百分比宽度，其父元素.navbar-brand为行内块元素、无固定宽度基准，导致图片实际渲染宽度失控，挤占了后续导航菜单的布局空间，多词导航项因为剩余空间不足被挤压换行错位。
• 你之前尝试添加的display: infline-flex; !important存在拼写错误（正确属性值为inline-flex），且Bootstrap4导航栏本身已采用flex布局，额外添加该属性无意义。
• 代码中导航列表使用了Bootstrap5的间距类ms-auto，但你引入的是Bootstrap4.6.1版本，该类名不生效，无法正确将导航菜单推到右侧，进一步加剧布局错位。
• 你测试的navbar-brand position: absolute; left: 50%;样式会让logo脱离正常文档流，虽然不会挤占菜单空间，但绝对定位默认以最近的定位父级为基准，直接设left:50%会把logo放到导航栏中间，无法满足左侧放置的需求，属于治标不治本的方案。

按以下步骤调整代码即可解决问题：

1. 将logo的百分比宽度改为固定像素宽度，消除宽度计算异常
   原logo代码：

   <a href="#" class="navbar-brand">
       <img src="img/jd_full.png" width="20%" alt="logo" />
   </a>
   

   修改为固定宽度（数值可根据你的logo实际尺寸调整）：

   <a href="#" class="navbar-brand">
       <img src="img/jd_full.png" width="120" alt="logo" />
   </a>
   

2. 替换版本不兼容的类名，将导航列表的ms-auto改为Bootstrap4对应的右对齐类ml-auto：

   <ul class="navbar-nav ml-auto text-uppercase">
   

3. 删除所有之前测试添加的无效样式：
   • 拼写错误的display: infline-flex; !important
   • 给.navbar-brand添加的绝对定位相关样式

如果后续需要微调logo和导航项的间距，直接给对应元素加固定像素的margin/padding即可，导航栏内部元素尽量避免使用百分比宽度，防止出现布局计算异常。

内容的提问来源于stack exchange，提问作者FlashBox