Bootstrap 导航栏在小屏幕上不可读答案

【问题标题】：Bootstrap Navbar not readable on small screenBootstrap 导航栏在小屏幕上不可读
【发布时间】：2018-08-11 21:20:48
【问题描述】：

我的引导导航栏在小屏幕上不可见，有人可以帮我解决吗？在宽屏上它工作正常！

<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>

navbar on small screen

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

阅读导航栏文档：http://getbootstrap.com/docs/4.1/components/navbar/#supported-content

所有导航栏内容都在 collapse 内，由于使用了 navbar-expand-lg，因此该 collapse 隐藏在 lg 和下方
如果您要使用导航栏折叠，您应该有一个切换按钮

或者，不要使用折叠并保持导航栏在所有断点处展开 (navbar-expand)

https://www.codeply.com/go/3uTvc5EtTh

【讨论】：