Bootstrap 4移动端导航栏切换按钮实现全屏高度功能求助

你不需要额外编写JavaScript，利用Bootstrap折叠组件自带的show类，结合CSS媒体查询就能实现需求。以下是具体方案：

步骤1：微调HTML结构 #

给切换按钮添加自定义类，确保菜单展开后仍能点击关闭；同时修正导航栏内列表的宽度类（原w-90为无效Bootstrap类，替换为w-100）：

<nav class="navbar navbar-expand-lg navbar-light bg-yellow px-5 py-3 font-weight-bold" id="navbar">
    <div class="logo d-flex flex-column">
        <a href="index.html" class="mx-auto"><img src="./Design/Logo.png" width="40" height="40" class="logo-img"></a>
        <a class="navbar-brand mx-auto font-weight-bold" href="#">Logo</a>
    </div>
    <button class="navbar-toggler navbar-toggler-fixed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav w-100 justify-content-around ml-lg-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item justify-self-end">
                <a href="./contact.html" class="btn btn-danger">Button</a>
            </li>
        </ul>
    </div>
</nav>

步骤2：添加CSS样式 #

针对平板/移动端（屏幕宽度小于992px，对应Bootstrap 4的lg断点）编写以下样式：

/* 导航栏基础定位，确保内部元素层级正确 */
#navbar {
    position: relative;
    z-index: 1000;
}

/* 固定切换按钮位置，避免菜单展开后被遮挡 */
.navbar-toggler-fixed {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

/* 平板/移动端专属样式 */
@media (max-width: 991.98px) {
    /* 菜单展开时占满整个视口 */
    #navbarNav.show {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff; /* 可替换为导航栏的bg-yellow颜色 */
        display: flex;
        align-items: center;
        padding: 0 1rem;
    }

    /* 垂直排列菜单项，均匀分布在全屏内 */
    #navbarNav.show .navbar-nav {
        flex-direction: column;
        height: 100%;
        justify-content: space-evenly;
        text-align: center;
    }

    /* 优化按钮显示效果 */
    #navbarNav.show .btn-danger {
        padding: 0.75rem 2rem;
        font-size: 1.2rem;
    }
}

核心原理 #

• Bootstrap折叠组件展开时，会自动给目标容器（#navbarNav）添加show类，我们通过这个类触发全屏样式。
• 媒体查询max-width: 991.98px精准对应navbar-expand-lg的断点，确保样式仅在平板/移动端生效。
• 利用position: fixed让展开的菜单占满整个视口，再通过Flex布局让菜单项均匀分布。

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