Как можно изменить вид Bootstrap Breadcrumbs на смартфонах?
Здравствуйте!
Нужен совет. У меня сайт работает под управлениемJoomla!
, оформление на бутстрапе. На страницах имеются Breadcrumbs («хлебные крошки»).
При просмотре на мобильных устройствах, если там более 2-3 элементов, или если они длинные, то они переносятся на новые строки, что выглядит не очень красиво...
Что можно сделать, чтобы как-то улучшить ситуацию? Возможно, CSS умеет динамически уменьшать размер шрифта при уменьшении размеров экрана. Или может можно как-то задать в стилях, чтобы данный блок должен распологался на одной строке.Скриншот хлебных крошек на десктопе:
![Вид хлебных крошек Bootstrap на десктопе](/assets/images/tickets/407/f1bc0f5f23a5feb6b6efe3caeb792feae62b7d33.png)
Изображение хлебных крошек на экранах мобильных устройств:
![Изображение хлебных крошек на экранах мобильных устройств](https://itchief.ru/assets/images/tickets/407/292d4cb4f0ba516e4d3eff230bdd6c835e8e30d8.png)
У блока с хлебными крошками на данный момент стоит класс col-xs-12
. Сами «крошки» формируются с помощью PHP стандартными средствами Joomla. Понимаю, что без остального кода сложно будет что-то сказать, но если сможете что-то посоветовать в общем плане, буду благодарен.
Ответы: 1
Здравствуйте.
Тут можно попробовать различные варианты:1) Сделать их простыми. Например, показывать только родительский раздел. Кстати, это сделано на многих крупных сайтах.
2) Можно задать и относительный размер, например, в единицах vw (1vw = 1% от ширины области просмотра браузера, т.е. viewport). Т.е. что-то такое: 3) Убрать служебные слова и текст «Главная». Если название «Главная» необходимо оставить, то его лучше заменить названием сайта или использовать значок. Для того чтобы они не переносились, можно добавить CSS-свойствоwhite-space
со значениемnowrap
, но это будет смотреться как-то не корректно.