Bootstrap 4 引导导航栏在小屏幕上不可读

我的引导导航栏在小屏幕上不可见，有人能帮我吗？在大屏幕上工作很好

<main class="container border rounded mt-3">
<div class="row">
    <nav class="navbar navbar-expand-lg navbar-dark bg-info col-lg-12">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item <c:if test="${param.page =='index' }">active</c:if>">
                    <a class="nav-link" href="index.htm">Home </a>
                </li>
                <li class="nav-item <c:if test="${param.page =='wagens' }">active</c:if>">
                    <a class="nav-link" href="<c:url value="/wagens/list.htm"/>">Wagens</a>
                </li>
                <li class="nav-item <c:if test="${param.page =='wasbeurt' }">active</c:if>">
                    <a class="nav-link" href="<c:url value="/wagens/wasbeurt.htm"/>">Wasbeurt</a>
                </li>
                <li class="nav-item <c:if test="${param.page =='admin' }">active</c:if>">
                    <a class="nav-link" href="<c:url value="/wagens/new.htm"/>">Admin</a>
                </li>
            </ul>
            <span class="navbar-text">
                24/06/2018 17:41
            </span>
        </div>
    </nav>
</div>

24/06/2018 17:41

阅读导航栏文档：

所有导航栏内容都位于

折叠

内，由于使用了导航栏展开lg，因此隐藏在lg上和下方

如果要使用导航栏折叠，应该有一个切换按钮

或，不要使用折叠并在所有断点上保持导航栏展开（

导航栏展开

）