Закладки Bootstrap накладываются на более мелкие устройства

Question

Я использую тему начальной загрузки и отлично работаю для остальной части макетов. Но вкладки не подходят для небольших экранов. Источник:

И выход в больших/нормальных экранах:

Тогда выход в меньшем экране выглядит следующим образом:

У меня нет конкретных дополнительных JS сюда вкладки.

Надеюсь, что кто-то может дать точное направление.

К слову сказать, я просто крупный специалист по CSS и бутстрап.

Answer 1

Возможно, вам захочется взглянуть на отзывчивую утилиту bootstrap, которая позволяет отображать/скрывать элементы на основе размеров экрана.

http://getbootstrap.com/css/#responsive-utilities

<ul class="nav nav-tabs hidden-xs"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 
<ul class="nav nav-pills nav-stacked visible-xs-block"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 

Вы можете использовать http://www.bootply.com/new#, чтобы проверить это (скопировать и вставить код, указанным выше, запустите его, затем изменить ваш браузер на узкие ширины, чтобы увидеть его в действии.)

Возможно, вам придется переосмыслить, как определенные вещи представлены на странице разных размеров, но это должно дать вам некоторые инструменты, когда вам нужно представить различные элементы на основе размера экрана (отзывчивый.)