时间戳

首页 > 解决方案 > Bootstrap 导航栏在小屏幕上不可读

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

问题描述

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

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

小屏幕上的导航栏

标签： bootstrap-4

解决方案

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

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

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

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

推荐阅读