如何在materializecss中创建响应式Breadcrumb？

Question

我正在使用materializecss作为前端在我的jsp页面中,我使用Breadcrumbs在页面顶部显示信息它工作正常但是每当我在移动浏览器或小屏幕上看到我的页面时,整个Breadcrumbs都没有显示.那么如何提出任何建议？

<div class="section" style="padding-bottom:0;">
            <div class="row">
                <nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">
                    <a class="breadcrumb" href="<c:url value="/"/>">Home</a>
                    <a class="breadcrumb" href="<c:url value="/${currentCityName}"/>">${currentCity.name}</a>
                    <c:forEach items="${breadCategories}" var="c">
                        <c:set var="puri"><catalog:CategoryUri category="${c}"/></c:set>
                        <a class="breadcrumb" href="<c:url value="/${currentCityName}${puri}"/>">${c.name}</a>
                    </c:forEach>                
                    <a class="breadcrumb" href="javascript:;">${product.name}</a>
                </nav>                   
            </div>
        </div>

Answer 1

我不完全确定，但如果你更换它可能会起作用

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">

和

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;">

区别在于 l12 变为 s12。这告诉 Materialise 在小和更高的位置上为面包屑提供 12 列。