Bootstrap Navbar 在移动视图中消失 [重复]答案

【问题标题】：Bootstrap Navbar is disappearing in mobile view [duplicate]Bootstrap Navbar 在移动视图中消失 [重复]
【发布时间】：2021-11-28 19:44:17
【问题描述】：

所以我在导航栏上使用 Bootstrap 5，但每当我用移动视图查看它时，按钮就会消失。悬停在它上面也不会显示任何东西。有没有办法解决这个问题？

代码如下：

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">
            <img src="https://i.imgur.com/pK7YWmW.png" height="60" width="212" alt="Server Knight profile picture.">
        </a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active navbar-btn"
                        href="https://discord.com/oauth2/authorize?client_id=801424420605263902&permissions=8589934591&scope=bot">Invite
                        me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active navbar-btn" href="https://discord.gg/yAd6Y2GcTe">DSOF</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        About the bot
                    </a>
                    <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" id="dropdown-btn" href="/docs">Docs</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/faq">Faq</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/team">The team</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Applications
                    </a>
                    <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" id="dropdown-btn" href="/appeal">Appeal a report</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/apply">Apply to be a bot developer</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link active navbar-btn" href="/donate">Donate</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <a href="/login" class="login-btn nav-link active" id="login-btn">Login</a>
            </ul>
        </div>
    </div>
</nav>

这里是JSFiddle

【问题讨论】：

您预计会发生什么？您正在使用 navbar-expand-xl 这意味着它将在小于 xl 屏幕宽度的情况下折叠到移动设备
哦，真的，我不知道这一点
我收到了您的问题。您需要在导航栏标签中添加媒体查询。在引导文档中，您将找到所有设备的媒体查询。

标签： html css bootstrap-5

【解决方案1】：

您的问题正如这一行所评论的那样：

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">

就像在Bootstraps documentation 上所说的那样，导航栏只会显示在 xl 设备（1200 像素宽度）上，如果您希望它在移动设备上显示，并从中删除 navbar-expand-xl。

【讨论】：