如何阻止Bootstrap3导航栏点击搜索图标后崩溃变形？

咱们先拆解下为什么点击搜索图标时导航栏会出现形状崩溃的问题：

问题原因 #

1. 强制高度限制干扰布局：你给ul.navbar_ul_base加了行内样式max-height:50px，虽然Bootstrap导航栏默认高度是50px，但当下拉菜单触发时，父元素li的.open状态会带来样式变化，这个固定的max-height会打断布局的自适应计算，导致ul高度异常撑开。
2. 破坏默认布局规则：你把.nav > li的display强制改成了inline-block !important，而Bootstrap的.navbar-nav > li默认是float:left布局。inline-block元素默认是baseline垂直对齐，这种布局在元素状态变化（比如下拉菜单展开）时，很容易出现高度偏移的问题。
3. CSS注释语法错误：你用了// display: flex;这种SCSS/JS风格的注释，但原生CSS只支持/* */注释，这会导致后面的width:100%样式可能被浏览器解析错误，间接影响导航栏的布局表现。

修复步骤 #

方案一：恢复Bootstrap默认布局（推荐） #

1. 移除ul标签上的行内样式style="max-height: 50px;"，让导航栏高度跟随框架默认规则自适应。
2. 删除.nav > li { display: inline-block !important; }这行代码，恢复默认的浮动布局。
3. 把CSS里的// display: flex;改成/* display: flex; */，修复注释语法错误。

方案二：保留inline-block布局（若有特殊需求） #

如果你确实需要li以inline-block排列，那调整垂直对齐方式来避免高度偏移：

.nav > li {
  display: inline-block !important;
  vertical-align: top; /* 关键：将垂直对齐设为顶部 */
}

同时记得移除ul的max-height限制和修复注释错误。

按照上面的方法修改后，点击搜索图标时导航栏就不会再变形了，你可以试试看！

内容的提问来源于stack exchange，提问作者David Foie Gras