Чтобы сделать TabLink в Bootstrap линию на мобильных устройствах, вам потребуется использовать дополнительные классы Bootstrap и медиа-запросы.
Во-первых, вам нужно убедиться, что ваша разметка для TabLink-ов правильно оформлена. Обычно TabLink-и в Bootstrap помещаются в элемент <ul> с классом "nav nav-tabs", а каждый TabLink представляет собой элемент <li>, содержащий ссылку <a> с атрибутами data-toggle="tab" и href, указывающим на соответствующий панель TabContent.
Для того чтобы сделать TabLink-и в линию на мобильных устройствах, можно использовать классы "nav-fill" и "nav-justified". Класс "nav-fill" распределяет TabLink-и по всей ширине родительского контейнера, а класс "nav-justified" делает все TabLink-и одинаковой ширины.
Пример разметки для TabLink-ов с использованием классов "nav-fill" и "nav-justified":
<ul class="nav nav-tabs nav-fill nav-justified">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
</ul>
Однако, по умолчанию, TabLink-и в Bootstrap переключаются в свернутую выпадающую панель на мобильных устройствах. Чтобы предотвратить это и позволить TabLink-ам оставаться видимыми на мобильных устройствах в линию, следует использовать пользовательские медиа-запросы.
Пример медиа-запроса, который отключает сворачивание TabLink-ов на мобильных устройствах:
@media (max-width: 767px) {
.nav-tabs .nav-item {
display: inline-block !important;
}
}
В данном примере медиа-запрос применяется на устройствах с максимальной шириной экрана 767 пикселей (это соответствует ширине мобильных устройств). Стиль "display: inline-block !important;" применяется к каждому элементу .nav-item внутри .nav-tabs, чтобы сделать их видимыми в линию.
Добавьте указанный выше медиа-запрос в свою таблицу стилей CSS, и TabLink-и в Bootstrap будут отображаться в линию на мобильных устройствах, в то время как на более широких экранах они будут заполнять родительский контейнер или быть одинаковой ширины.
Надеюсь, этот ответ был полезным и помог вам решить вашу проблему с TabLink-ами в Bootstrap на мобильных устройствах. Если у вас возникнут еще вопросы, не стесняйтесь задавать!