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

概述我正在使用materializecss作为前端在我的jsp页面中,我使用Breadcrumbs在页面顶部显示信息它工作正常但是每当我在移动浏览器或小屏幕上看到我的页面时,整个Breadcrumbs都没有显示.那么如何提出任何建议？ <div class="section" style="padding-bottom:0;"> <div class="row"> 我正在使用materializeCSS作为前端在我的Jsp页面中,我使用Breadcrumbs在页面顶部显示信息它工作正常但是每当我在移动浏览器或小屏幕上看到我的页面时,整个Breadcrumbs都没有显示.那么如何提出任何建议？

<div  >            <div >                <nav  >                    <a  href="<c:url value="/"/>">Home</a>                    <a  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  href="<c:url value="/${currentCityname}${puri}"/>">${c.name}</a>                    </c:forEach>                                    <a  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中创建响应式Breadcrumb？全部内容，希望文章能够帮你解决html – 如何在materializecss中创建响应式Breadcrumb？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。