如何使导航栏切换器在全屏模式下不消失？

Question

尝试使用引导程序4创建导航栏。我可以正确显示列表元素，但是当我添加汉堡菜单（导航栏切换）时，仅在水平缩小页面时显示按钮。

我尝试了各种不同的操作，例如更改按钮和导航栏上的类。

这是html：

<div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h5 class="text-white h4">Collapsed content</h5>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>

    <nav class="navbar navbar-default  navbar-expand-sm">


        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarToggleExternalContent"
            aria-controls="navbarToggleExternalContent" aria-expanded="false"
            aria-label="Toggle navigation"></button>


        <ul class="navbar-nav">

            <li class="nav-item"><a class="nav-link "
                href="${pageContext.request.contextPath}">Home</a></li>
            <li class="nav-item"><a class="nav-link "
                href="${pageContext.request.contextPath}/calendar">Calendar</a></li>
            <li class="nav-item"><a class="nav-link " href="#">My
                    Events</a></li>
            <li class="nav-item"><a class="nav-link "
                href="${pageContext.request.contextPath}/preferences">Preferences</a>
            </li>
        </ul>



    </nav>
</div>

以及我正在使用的小定制CSS：

.navbar {
   background-color: #ac202d;
}

.navbar .navbar-nav .nav-item .nav-link {
    color: white;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #ac202d;
}