Bootstrap 5：菜单折叠时如何让顶部Home项:hover效果占100%宽度

当导航栏在移动设备上折叠时，需要让顶部“Home”菜单的:hover效果覆盖整个顶部栏100%宽度，包括切换按钮后方的区域。以下是具体实现方案：

核心思路 #

默认布局中Home选项和切换按钮处于同一行，Home的hover范围仅局限于自身容器。我们可以通过伪元素扩展背景+调整布局权重的方式，让hover效果延伸至整个导航栏宽度。

修改后的代码 #

CSS #

.navbar .nav-link {
    padding: 10px 8px 12px 8px !important;
    font-size: 2rem;
    color: White;
}
.navbar .nav-link:hover {
    color: red; 
}

/* 针对导航栏折叠状态的样式（适配xxl断点以下设备） */
@media (max-width: 1399.98px) {
    /* 让Home的导航项成为相对定位容器，为伪元素提供基准 */
    #nav-home {
        width: 100%;
        position: relative;
    }

    /* 用伪元素延伸hover背景至右侧全部区域 */
    #nav-home:hover::after {
        content: '';
        position: absolute;
        top: 0;
        right: -100vw;
        height: 100%;
        background-color: #ffffff;
        z-index: -1;
    }

    #nav-home:hover {
        background-color: #ffffff;
    }

    /* 让Home所在的导航容器占满可用空间，将切换按钮挤至右侧 */
    .navbar-nav.me-auto {
        flex-grow: 1;
    }

    /* 保持导航栏容器不换行，确保Home和切换按钮在同一行 */
    .navbar > .container {
        flex-wrap: nowrap;
    }
}

HTML #

<html lang="en">
<head>
<title>Home Hover</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-xxl navbar-dark row g-0 m-0 p-0" style="background-color: rgb(150 150 150) !important;">
        <div class="container m-0 p-0">
            <ul class="navbar-nav me-auto">
                <li class="nav-item" id="nav-home"><a class="nav-link" href="">Home</a></li>
            </ul>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link" href="">Link</a></li>
                    <li class="nav-item"><a class="nav-link" href="">Link</a></li>
                </ul>  
            </div>
        </div>
    </nav>
</body>
</html>

效果说明 #

• 媒体查询精准匹配navbar-expand-xxl的折叠断点（1400px以下），仅在移动折叠状态下生效
• 伪元素::after通过绝对定位延伸背景至右侧，覆盖切换按钮所在区域
• flex-grow:1确保Home所在的导航容器占满导航栏水平空间，保证hover效果的连续性

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