Как лучше адаптировать Табы?

Question

[Евгений]

Есть вот такие табы

так вот с компа ещё всё ок. Но в мобильной версии происходит ад.



Думал как эту проблем исправить. Вместо кнопок этих при маленьком экране менять табы на выпадающий список. Или лучше так не делать?

Comments

[tyzberd]

можно как гугл joxi.ru/zAN5NQBuBbnLb2 но у вас их много, не очень подходит

Answer 1

[Дмитрий]

Пример
Fiddle

Comments

[Евгений]

Я пробовал стоковые табы без супер стилей. Тоже каша получается.

[Дмитрий]

Евгений, А что не так? На декстопе табы, на мобайл - select. Как я понял, вы так хотите сделать

[Евгений]

Дмитрий, А Сори) Не заметил что там ещё селект есть. Попробую сейчас как это будет. Или не попробую если это 4 BS. Вижу тут классы hidden-sm visible-xs. Я так понимаю именно они отвечают за пропажу и появление при размерах экрана

[Евгений]

Евгений, Я проверил , классы эти в BS 3 есть. Единственое что нужно перестроить с 768 на 1200. Сейчас поиграюсь .Спасибо

[Евгений]

Дмитрий, Хотя нашёл косяк, пытаюсь исправить. Селекты не те табы выбирают а половина вовсе не пашет

Answer 2

[Andrej Sharapov]

Можно сделать в виде таблички без внешних отступов 2х14

Comments

[Евгений]

Это 2 столбца 14 строк? Мне кажется будет такой же эффект.

Попробовал сейчас сделать через select и табы через селект не переключаются

[Andrej Sharapov]

Вам нужно сначала понять для чего вы их делаете. Если вы сделаете выпадающим списком или триггер, скрыв все не активные вкладки, посетитель может не понять что нужно делать и будет думать, что эта вкладка - все что у вас есть.

[Евгений]

Andrej Sharapov, Для того чтобы не было 3 этажа табов с мобильной телефона. Чтобы можно было удобно выбрать отделение

Answer 3

[maxsnw]

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

Answer 4

[Александр Алексеев]

если табов много то я обычно оборачиваю их в slick slider

Answer 5

[Владислав Лысков]

посмотри как сделано здесь, можешь выгрузить отдельный плагин