jquery - 在移动 View 中将 Bootstrap 选项卡切换为下拉列表

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>

我在 Bootstrap 中使用基本选项卡。

Answer 1

以下 css 将基本设计应用于设备宽度 >=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/

希望对你有帮助