我在前端使用 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>
最佳答案
在我看来,对于移动设备,您可以忽略面包屑部分,因为它在移动屏幕上看起来不太好看。因此,这会浪费空间。
例如:
@media only screen and (max-width : 992px) {
.breadcrumb-nav {
display:none;
}
}
或者您也可以减小面包屑的字体大小:
@media only screen and (max-width : 992px) {
.breadcrumb-nav {
font-size:;
}
}
关于html - 如何在 materializecss 中创建响应式面包屑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37086493/