如何用React和Bootstrap将下拉菜单设置为100%页面宽度

问题描述 #

使用React和Bootstrap开发导航栏时，带下拉菜单的导航链接点击后，下拉菜单仅与触发链接宽度一致，无法铺满整个页面宽度，需要找出代码中缺失的部分实现全屏下拉。

现有代码 #

导航栏代码

<div className={`${styles.tempNavBottom} container-fluid`}>
  {navData && navData.mainMenu.map((item:any, i:number) => {
    if (item.dropdown){
      // 带dropdown属性的项触发下拉菜单
      return dropdownButtons(item, i)
    } else {
      return <Link className="text-decoration-none my-auto" href={item.url} key={i}>{item.title}</Link>
    }
  })}
</div>

下拉菜单组件代码

const dropdownButtons = (item: any, i: number) => {
  return (
    <li
      className="tf-grey text-decoration-none my-auto dropdown list-unstyled"
      key={i}
    >
      <a
        role="button"
        className="btn dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        data-bs-display="static"
        aria-haspopup="true"
        aria-expanded="false"
        id={`${item.title}-dropdown`}
      >
        {item.title}
      </a>
      <div
        className="dropdown-menu p-3 w-100 open"
        role="menu"
        aria-labelledby={`${item.title}-dropdown`}
      >
        <a className="dropdown-item">Item 1</a>
        <a className="dropdown-item">Item 2</a>
      </div>
    </li>
  );
};

导航栏CSS

.tempNavBottom {
  height:50px;
  width:100vw;
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: rgb(61, 60, 60);
  position:absolute;
  transform: translateY(65px);
  z-index:10;
}

问题原因 #

Bootstrap 默认的 .dropdown-menu 是相对于带有 .dropdown 类的父元素（此处为 <li>）进行绝对定位的，且宽度继承父元素宽度，因此无法铺满全屏。

解决方案 #

1. 修改下拉菜单的定位与宽度

给下拉菜单添加自定义样式，强制其相对于视口固定定位并铺满全屏：

• 先给下拉菜单的 className 添加自定义类 full-width-dropdown：

<div
  className="dropdown-menu p-3 full-width-dropdown open"
  role="menu"
  aria-labelledby={`${item.title}-dropdown`}
>
  <a className="dropdown-item">Item 1</a>
  <a className="dropdown-item">Item 2</a>
</div>

• 然后添加对应的CSS：

.full-width-dropdown {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 115px !important; /* 计算值：导航栏偏移65px + 自身高度50px，可根据实际调整 */
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0; /* 可选：去掉圆角，让菜单与屏幕边缘对齐 */
}

2. 移除父元素的相对定位（可选）

Bootstrap 的 .dropdown 类默认会给父元素设置 position: relative，可能干扰固定定位的下拉菜单，可添加自定义类覆盖：

• 修改父 <li> 的 className：

<li
  className="tf-grey text-decoration-none my-auto dropdown list-unstyled dropdown-static"
  key={i}
>

• 对应CSS：

.dropdown-static {
  position: static !important;
}

3. 动态调整菜单位置（可选）

如果导航栏位置会随滚动变化，可通过JavaScript动态计算下拉菜单的 top 值，确保始终紧贴导航栏底部。

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