Столкнулся недавно с проблемой отображения вкладок (tabs) Bootstrap на мобильных устройствах. Уж больно криво они отображаются. Если на десктопе их видно примерно так:

tabcollapse

То на мобильных устройствах они нацинают идти невпопад. Примерно так:

tabcollapse

Вкладки Bootstrap выстраиваются друг под другом и смотрятся, мягко говоря, не очень красиво. Решения я нашел на одном из зарубежных ресурсов (это очень большой плюс, когда понимаешь, что читаешь на английском языке, так как в этом сегменте Интернет очень много полезной информации), называется он tabcollapse. Все, что нужно вам сделать - это подключить данный скрипт - tabcollapseи инициализировать его следующей строкой:

$(document).ready(function() {
   $('#tabs').tabCollapse();
});

- если ul с табами у вас с id tabs. Результат будет примерно такой:

tabcollapse

tabcollapse

Если что-то не понятно пишите в комментариях!