Нужен совет по Breadcrumbs

Здравствуйте Александр!
Нужен ваш совет. У меня сайт на бутстрапе (под управлением joomla), имеется breadcrumbs («хлебные крошки»). При просмотре на мобильных устройствах, если там более 2-3 элементов, или если они длинные, они переносятся на новые строки, что выглядит не очень красиво… Что можно сделать, чтобы как-то улучшить ситуацию? Возможно, css умеет динамически уменьшать размер шрифта при уменьшении размеров экрана, или может можно как-то задать в стилях, что данный блок должен быть именно одной строкой? Примеры на скриншотах. У блока с хлебными крошками на данный момент стоит класс col-xs-12. Сами «крошки» формируются с помощью php стандартными средствами joomla. Понимаю, что без остального кода сложно будет что-то сказать, но если сможете что-то посоветовать в общем плане, буду благодарен.


   Вопросы 0    38 0

Комментарии (1)

  1. Александр Мальцев # 0
    Здравствуйте.
    Тут можно попробовать различные варианты:
    1. Сделать его простым. Например, показывать только родительский раздел. Кстати, это сделано на многих крупных сайтов.
    2. Можно задать и относительный размер, например, в единицах vw (1vw = 1% от ширины области просмотра браузера, т.е. viewport). Т.е. что-то такое: font-size: 3vw.
    3. Убрать служебные слова и текст «Главная». Если название «Главная» необходимо оставить, то его лучше заменить названием сайта или использовать значок.

    Для того чтобы не переносилось можно добавить CSS свойство white-space со значением nowrap, но это будет смотреться как-то не корректно.

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