在移動視圖中將引導選項卡切換到下拉列表

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以上設備的選項卡。您可以爲更高的手機分辨率更改此限制寬度：

@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; 
    } 
} 

http://jsfiddle.net/e7mzx24v/

希望它可以幫助

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> 

放入文件準備好功能」這個JavaScript片段，並把它放在</body>標籤的末端，以及在</body>標籤和不是它的外面當然。你必須擁有jQuery的啓動和運行

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

的工作演示可以在這裏找到：https://jsfiddle.net/fr0w59n9/