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

在我看来，对于移动设备，您可以忽略面包屑部分，因为它在移动设备屏幕上看起来不太好。因此，这将浪费空间。

e.g：

@media only screen and (max-width : 992px) {
   .breadcrumb-nav {
      display:none;
   }
}

或者您也可以减少面包屑的字体大小：

@media only screen and (max-width : 992px) {
   .breadcrumb-nav {
      font-size:;
   }
}

Answer 2

我不完全确定，但如果你替换

它可能会有效

<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。这告诉materialize将面包屑放在12列和更小的列上。

Answer 3

除了更改l12 to s12之外，您还有另一个问题。

您的面包屑被切断的原因是truncate级。按照设计，Materialise将切断超出容器/屏幕大小的任何内容。 Materialize Documentation on Helpers

尝试删除此课程。然后你可能会有其他造型问题，但不应该再被切断了。

Answer 4

你的面包屑会在手机屏幕上消失，所以你需要检查一下你的手机css并尝试一下这可能会对你有所帮助

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

这里的reference可能会对您有所帮助。

Answer 5

此处修改此代码为示例

<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

Answer 6

你可以在文本中添加样式word-wrap: break-word，我认为它可以正常工作

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

6 个答案: