Как создать отзывчивый Breadcrumbs в materializecss?

Я использую 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>

Ответ 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. это говорит о материализации, чтобы дать панировочным сухарям 12 столбцов на малой и более высокой.

Ответ 3

В дополнение к изменению от l12 to s12 у вас есть еще одна проблема.

Причина, по которой обрезаются ваши панировочные сухари, обусловлена классом truncate. По дизайну Materialize отключит содержимое, превышающее размер контейнера/экрана. Материализовать документацию для помощников

Попробуйте удалить этот класс. Тогда у вас могут быть другие проблемы с дизайном, но его больше не нужно отключать.

Ответ 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;">

вот ссылка, которая может быть полезна для вас.

Ответ 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 в текст, и я думаю, что он будет работать просто отлично