Использование div внутри бутстрапа nav-pill

Question

Я пытаюсь заставить загрузочные бутстрапы занимать меньше места в мобильном режиме, по умолчанию они складываются друг на друга. Это быстро использует много места. То, что я пытаюсь достичь, - это получить две таблетки на линию. До сих пор у меня есть все, что работает с исключением из активного класса. Когда я нажимаю таблетку, она становится активной, но не снимает активный класс с предыдущей активной таблетки.

HTML, я использую:

<ul class="nav nav-pills nav-justified" role="tablist"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li> 
     <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li> 
     <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li> 
     </div> 
     <div class="col-xs-6"> 
     <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li> 
     <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li> 
     <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li> 
     </div> 
    </div 
</ul> 

мне пришлось удалить > из CSS, связанных с таблетками для обеспечения укладки работал. Из-за того, что li не было непосредственно после ul. Так что все хорошо.

.nav li a { 
position: relative; 
display: block; 
padding: 10px 15px; 
} 
.nav li a:hover, 
.nav li a:focus { 
text-decoration: none; 
background-color: #eee; 
} 
.nav li.disabled a { 
color: #777; 
} 
.nav-pills li { 
float: left; 
} 
.nav-pills li a { 
border-radius: 4px; 
} 
.nav-pills li + li { 
margin-left: 2px; 
} 
.nav-pills li.active a, 
.nav-pills li.active a:hover, 
.nav-pills li.active a:focus { 
color: #fff; 
background-color: #337ab7; 
} 
.nav-justified { 
width: 100%; 
} 
.nav-justified li { 
float: none; 
} 
.nav-justified li a { 
margin-bottom: 5px; 
text-align: center; 
} 
.nav-justified .dropdown .dropdown-menu { 
top: auto; 
left: auto; 
} 

Моя единственная проблема теперь, когда я могу думать о том, может быть, <div class="row">...</div> и <div class="col-xs-6">...</div> получают в пути с файлом bootstrap.js когда работает активный переключатель.

Но .. Я не эксперт с JavaScript, как вы, вероятно, можете сказать, поэтому мне нужна помощь, чтобы выяснить, возможно ли это.

Благодаря

Роб

Answer 1

Вы можете сделать это, используя только CSS и HTML. У вас есть добавление строки и col-xs-6 divs, вложенных в ваш nav li. Элемент li ожидает, что теги ul/ol являются его непосредственными детьми - Bootstrap, безусловно, делает.

Способ решения вашей проблемы состоит в том, чтобы удалить эти дополнительные div внутри ul, а затем использовать display: inline-block на li, установив их ширину до 49%. По какой-то причине он должен составлять менее 50%, чтобы по какой-то причине сохранить два элемента в одной строке.

Вот измененный HTML-код:

<ul class="nav nav-pills nav-justified" role="tablist"> 
    <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li> 
    <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li> 
    <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li> 
    <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li> 
    <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li> 
    <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li> 
</ul> 

И вот ключ CSS:

.nav-justified li { 
    width: 49%; 
    display: inline-block; 
} 

Answer 2

Это должно сделать это!

$(function(){ 
    $('li[role="presentation"]').on('click', function(e){ 
    $('ul[role="tablist"] li').removeClass('active'); 
    $(this).addClass('active'); 
    }) 
}) 

JSFiddle