Bootstrap双导航栏窗口缩放时链接重叠问题解决方案

• 第二层导航加了navbar-expand-lg类，Bootstrap默认在宽度小于992px时会把导航项切换为垂直堆叠布局，之前加的white-space: nowrap只能防止文字内部换行，没法阻止导航项本身垂直排列
• 全局.navbar-nav样式同时作用于两层导航，媒体查询里的配置把所有导航项都改成了块级居中排列，小屏宽度不够时自然会挤压重叠
• 搜索框写死了600px固定宽度，加上硬编码的margin值，进一步挤占了导航的可用空间

1. 调整第二层导航HTML结构 #

亚马逊的分类导航不会在小屏折叠成汉堡菜单，而是保持横向排列、超出部分支持横向滚动，所以要去掉第二层导航的navbar-expand-lg类，给导航列表单独加专属类避免和第一层样式冲突，同时加上弹性布局相关类强制水平排列：

<!-- 第二层导航 移除navbar-expand-lg避免默认折叠行为 -->
<nav class="navbar bg-transparent py-1" id="hehe">
  <div class="container-fluid px-2">
    <!-- 给ul加专属类second-nav-list -->
    <ul class="navbar-nav flex-row flex-nowrap second-nav-list w-100 overflow-auto">
      <li class="nav-item">
        <a class="nav-link px-2" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Kids</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Men</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Women</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Fragrances</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Toys & Games</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Electronics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Today's Deals</a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-2" href="#">Clothes</a>
      </li>
    </ul>
  </div>
</nav>

添加的类作用说明：

• flex-row：强制导航项始终水平排列，不会转成垂直堆叠
• flex-nowrap：强制所有导航项不换行
• overflow-auto：宽度不足时支持横向滚动，和亚马逊交互逻辑一致
• 缩小了导航项的左右内边距，小屏下布局更紧凑

2. 替换原有CSS代码 #

把原来全局生效的导航样式改成针对性配置，避免两层导航样式互相干扰，同时去掉写死的固定宽度，改成弹性自适应：

body{
    margin: 0;
    background: linear-gradient(to bottom,#232f3d 460px, white) fixed;
}

.img{
    width: 100px;
}

a{
    color: white !important;
}

/* 仅针对第一层导航的navbar-nav设置样式，不做全局配置 */
#navbarSupportedContent .navbar-nav{
    margin-left: 2rem;
    white-space: nowrap;
}

/* 第二层导航专属样式 */
.second-nav-list {
  gap: 0.25rem;
  /* 隐藏滚动条但保留滚动功能，视觉更接近亚马逊体验 */
  scrollbar-width: none;
}
.second-nav-list::-webkit-scrollbar {
  display: none;
}
.second-nav-list .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
}

#hehe a:hover{
    background-color: transparent;
    color: white !important;
    border: 1px solid white
}

.nav-link:hover{
    color: black !important;
    background-color: white;
}

/* 搜索框去掉固定宽度，用弹性属性自适应 */
.d-flex{
    flex: 1 1 auto;
    max-width: 600px;
    min-width: 200px;
} 

#drop{
    margin-right: 30px;
}

.shopping-cart:hover{
    padding: 2px;
    transition: 0.3s;
    background-color: white;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.shopping-cart{
    width: 40px !important;
}

.p2_landing{
    margin-top: -20px;
}

/* 媒体查询只针对第一层导航做适配，不影响第二层 */
@media (max-width:992px){
    #navbarSupportedContent .navbar-nav{
        text-align: center;
        margin-left: 0;
        margin-top: 0.5rem;
    }
    .d-flex{
        margin-top: 4px; 
        width: 100%;
        max-width: 100%;
    }
}

修改完成后：

• 桌面端宽度充足时，两层导航所有元素完整水平展示
• 窗口缩小过程中，第一层导航正常触发Bootstrap自带的折叠汉堡逻辑，第二层分类导航始终保持水平排列，不会堆叠重叠
• 小屏下第二层导航内容超出宽度时，支持鼠标拖拽/触屏滑动浏览所有分类，和亚马逊官网导航交互完全一致

内容的提问来源于stack exchange，提问作者Moaz El Sayed