Question

有没有办法阻止标签包装并将它们转换为经过某个断点的单个下拉列表？

欣赏javascript将需要做繁重的工作。我似乎无法在网上找到一个合适的例子。

有人能指出我正确的方向吗？

由于

Answer 1

这是工作演示，在小页面和整页长度的代码片段中运行它：

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown-menu").on("click", "a", function () {             
                     $('#myTabs a[href="#' + $(this).attr("class") + '"]').tab('show');               
                });

            });
        </script>


    <div class="container">
            <!--Visible only in mobile or xtra small devices-->
            <div class="dropdown visible-xs">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Menu
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="home">Home</a></li>
                    <li><a class="profile">profile</a></li>
                    <li><a class="messages">messages</a></li>
                    <li><a class="settings">settings</a></li>
                </ul>
            </div>

            <!-- Nav tabs visible only in medium and larger devices-->
            <ul class="nav nav-tabs visible-lg visible-md" role="tablist" id="myTabs">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content ">
                <div role="tabpanel" class="tab-pane active" id="home">Home</div>
                <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
                <div role="tabpanel" class="tab-pane" id="messages">Message</div>
                <div role="tabpanel" class="tab-pane" id="settings">Setting</div>
            </div>
        </div>

Bootstrap响应式菜单 - 选项列表中的选项卡

1 个答案: