Bootstrap 3导航栏navbar-header区域Logo无法点击的修复求助

问题根源 #

.navbar-header设置了height:0，导致桌面大屏设备下该容器的可点击区域被压缩，Logo链接的点击事件依赖父容器的有效触发区域，因此无法正常响应；而移动端因导航折叠逻辑，.navbar-header的布局不受此样式影响，Logo可正常点击。

不破坏布局的修复代码 #

/* 仅对Bootstrap 3桌面大屏断点生效（可根据实际布局调整断点值） */
@media (min-width: 768px) {
  .navbar-header {
    overflow: visible; /* 允许子元素超出父容器高度限制 */
  }
  .navbar-header .navbar-brand {
    position: relative;
    z-index: 1; /* 确保链接层级优先，不被其他元素遮挡 */
    height: 50px; /* 与导航栏默认高度保持一致，维持原有布局 */
    display: flex;
    align-items: center; /* 保证Logo垂直居中，匹配原有样式 */
  }
}

方案说明 #

1. 精准响应控制：通过媒体查询仅在桌面大屏设备应用修复，完全不干扰移动端/平板端的折叠导航表现。
2. 解除高度限制：overflow: visible让Logo链接可以超出.navbar-header的height:0范围，避免点击区域被父容器裁剪。
3. 布局无缝匹配：设置.navbar-brand的高度为导航栏默认值，并用flex布局维持Logo垂直居中，确保和原有布局完全一致，无偏移变形。
4. 层级保障：z-index确保Logo链接在导航栏其他元素之上，避免被菜单等元素覆盖导致点击失效。

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