Как можно изменить вид Bootstrap Breadcrumbs на смартфонах?
1.1K
1
Здравствуйте!
Нужен совет. У меня сайт работает под управлениемJoomla!, оформление на бутстрапе. На страницах имеются Breadcrumbs («хлебные крошки»).
При просмотре на мобильных устройствах, если там более 2-3 элементов, или если они длинные, то они переносятся на новые строки, что выглядит не очень красиво...
Что можно сделать, чтобы как-то улучшить ситуацию? Возможно, CSS умеет динамически уменьшать размер шрифта при уменьшении размеров экрана. Или может можно как-то задать в стилях, чтобы данный блок должен распологался на одной строке.Скриншот хлебных крошек на десктопе:
Изображение хлебных крошек на экранах мобильных устройств:
У блока с хлебными крошками на данный момент стоит класс col-xs-12. Сами «крошки» формируются с помощью PHP стандартными средствами Joomla. Понимаю, что без остального кода сложно будет что-то сказать, но если сможете что-то посоветовать в общем плане, буду благодарен.
Тут можно попробовать различные варианты:
1. Сделать его простым. Например, показывать только родительский раздел. Кстати, это сделано на многих крупных сайтов.
2. Можно задать и относительный размер, например, в единицах vw (1vw = 1% от ширины области просмотра браузера, т.е. viewport). Т.е. что-то такое: font-size: 3vw.
3. Убрать служебные слова и текст «Главная». Если название «Главная» необходимо оставить, то его лучше заменить названием сайта или использовать значок.
Для того чтобы не переносилось можно добавить CSS свойство white-space со значением nowrap, но это будет смотреться как-то не корректно.