Question

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

<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

Answer 1

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

所有Navbar内容都在collapse内部，由于使用了navbar-expand-lg，它会隐藏在lg下方和下方
如果要使用Navbar折叠，则应该有一个切换按钮

Or ，请不要使用折叠功能，并在所有断点（navbar-expand）上保持导航栏展开

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

Bootstrap Navbar在小屏幕上不可读

1 个答案: