如何在materializecss中创建响应式面包屑？答案

【问题标题】：How to create responsive Breadcrumbs in materializecss?如何在materializecss中创建响应式面包屑？
【发布时间】：2016-05-07 08:52:59
【问题描述】：

我在前端使用materializecss 在我的jsp页面中，我使用面包屑在页面顶部显示信息，它工作正常但是每当我在移动浏览器或小屏幕上看到我的页面时，整个面包屑不显示。那么如何回应任何建议呢？

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

【问题讨论】：

你能把你的代码嵌入到 jsfiddle 上吗？

标签： html css jsp materialize

【解决方案1】：

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

例如：

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

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

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

【讨论】：

【解决方案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 列小和更高。

【讨论】：

【解决方案3】：

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

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

尝试删除此类。那么你可能还有其他样式问题，但它不应该再被切断。

【讨论】：

【解决方案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，可能对您有帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

【讨论】：