如何修改Bootstrap5下拉菜单？实现全屏宽度与导航栏链接居中

一、实现下拉菜单全屏宽度 #

通过自定义CSS强制覆盖Bootstrap默认样式，让下拉菜单脱离父级导航栏的定位限制，占满整个视口宽度：

.navbar .dropdown-menu {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  top: 56px !important; /* 替换成你导航栏的实际高度，比如Bootstrap默认的56px */
  border-radius: 0; /* 可选：去掉圆角，匹配目标页面风格 */
}

如果导航栏高度是动态的，可改用Bootstrap内置变量var(--bs-navbar-height)代替固定值。

二、让所有"Lorem"链接居中 #

给导航栏的链接容器添加flex居中样式，强制覆盖Bootstrap的默认对齐规则：

.navbar .navbar-nav {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  justify-content: center !important;
}

若"Lorem"链接不在.navbar-nav容器内，直接给对应容器添加text-align: center !important即可。

三、修复悬停下拉菜单不生效的问题 #

Bootstrap默认下拉菜单为点击触发，要改为悬停触发，推荐两种方案：

方案1：纯CSS实现 #

/* 鼠标悬停时显示下拉菜单 */
.navbar .nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
}
/* 鼠标停留在下拉菜单时保持显示 */
.navbar .nav-item.dropdown .dropdown-menu:hover {
  display: block !important;
}
/* 可选：下拉箭头翻转，提示展开状态 */
.navbar .nav-item.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
  transition: transform 0.2s;
}

方案2：JS辅助实现（更稳定） #

纯CSS在导航栏和下拉菜单存在空隙时，可能出现鼠标离开后菜单提前隐藏的问题，用JS监听事件更可靠：

document.querySelectorAll('.nav-item.dropdown').forEach(dropdownItem => {
  // 鼠标进入时展开下拉
  dropdownItem.addEventListener('mouseenter', () => {
    const menu = dropdownItem.querySelector('.dropdown-menu');
    const toggle = dropdownItem.querySelector('.dropdown-toggle');
    menu.classList.add('show');
    toggle.setAttribute('aria-expanded', 'true');
  });
  // 鼠标离开时收起下拉
  dropdownItem.addEventListener('mouseleave', () => {
    const menu = dropdownItem.querySelector('.dropdown-menu');
    const toggle = dropdownItem.querySelector('.dropdown-toggle');
    menu.classList.remove('show');
    toggle.setAttribute('aria-expanded', 'false');
  });
});

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