모바일보기에서 드롭 다운으로 부트 스트랩 탭을 전환하십시오.

Question

Bootsrtap 3으로 개발중인 웹 사이트가 있는데, 여기에 탭 요소가 있습니다. 모바일 디벨로퍼에서 탐색 할 때 드롭 다운으로 탭 항목을 만들어야합니다. 가능한가?

<!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> 
     <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> 
     <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> 
     <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> 
    </ul> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div class="tab-pane fade in active" id="home">A</div> 
     <div class="tab-pane fade" id="profile">B</div> 
     <div class="tab-pane fade" id="messages">C</div> 
     <div class="tab-pane fade" id="settings">D</div> 
    </div> 

부트 스트랩과 함께 기본 탭을 사용하고 있습니다.

Answer 1

다음 CSS는 device-width> = 480px 인 기기의 탭에 기본 디자인을 적용합니다. 당신은 더 높은 전화 확인을 위해이 제한 폭을 변경할 수 있습니다

http://jsfiddle.net/e7mzx24v/

@media screen and (max-width: 480px) { 
    .nav { 
     padding-left:2px; 
     padding-right:2px; 
    } 
    .nav li { 
     display:block !important; 
     width:100%; 
     margin:0px; 
    } 
    .nav li.active { 
     border-bottom:1px solid #ddd!important; 
     margin: 0px; 
    } 
} 

그것이 내가이 질문에 대한 답을 매우 늦게 알고 있지만, 체크 아웃

Answer 2

희망이 도움 :

http://www.jqueryscript.net/layout/Mobile-Friendly-Bootstrap-Tabs-Enhancement-with-jQuery.html

멋진 구현입니다!

Answer 3

내가 실수로 여기에 왔지만 대답을보고 많은 사람들이 찾고있는 것을 보았습니다. 나는이 대답을 게시했습니다. 실제로 모든 것을 쉽게 할 수있는 방법이 있습니다.

부트 스트랩 기본 클래스 'visible-xs'와 'hidden-xs'를 사용할 수 있습니다. 그러면 사용자가 페이지를 여는 장치에 따라 두 컨트롤 중 하나를 자동으로 숨기거나 표시합니다.

<div class="tabbable"> 
    <ul class="mb10 nav nav-pills nav-justified form-tabs hidden-xs"> 
     <li class="tab-selector active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> 
     <li class="tab-selector"><a href="#tab2" data-toggle="tab">Tab 2</a></li> 
     <li class="tab-selector"><a href="#tab3" data-toggle="tab">Tab 3</a></li> 
     <li class="tab-selector"><a href="#tab4" data-toggle="tab">Tab 4</a></li> 
     <li class="tab-selector"><a href="#tab5" data-toggle="tab">Tab 5</a></li> 
    </ul> 
    <select class="mb10 form-control visible-xs" id="tab_selector"> 
     <option value="0">Tab 1</option> 
     <option value="1">Tab 2</option> 
     <option value="2">Tab 3</option> 
     <option value="3">Tab 4</option> 
     <option value="4">Tab 5</option> 
    </select> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      Content tab 1 
     </div> 
     <div class="tab-pane" id="tab2"> 
      Content tab 2 
     </div> 
     <div class="tab-pane" id="tab3"> 
      Content tab 3 
     </div> 
     <div class="tab-pane" id="tab4"> 
      Content tab 4 
     </div> 
     <div class="tab-pane" id="tab5"> 
      Content tab 5 
     </div> 
    </div> 
</div> 

장소 문서 준비 기능 "이 자바 스크립트 코드 조각과 </body> 태그의 끝 부분과 잘 </body> 태그에 넣어 및 NOT 밖에서의 물론 :

예는 여기에 제공됩니다. . 당신이하고 실행 jQuery를해야합니다

는

$(document).ready(function() { 
    $('#tab_selector').on('change', function (e) { 
     $('.form-tabs li a').eq($(this).val()).tab('show'); 
    }); 
}); 

실제로 동작하는 데모는 여기에서 찾을 수 있습니다 : https://jsfiddle.net/fr0w59n9/ 아니,이 우우에서 사용할 수 없습니다