引导 4 - 使用<选择>而不是选项卡 （<li>）

Question

是否可以更改引导选项卡的外观，使其具有下拉选择，而不是使用 和 创建的标准选项卡<ul><li>我有相对较小的区域（如col-3），我需要显示具有大量选项卡的选项卡（如7-10个选项卡），但是当它跨越到3-4行时，它在小屏幕上看起来很丑陋。我想使用选择下拉列表（也许是一些用于slecet的jquery插件），我总是使用该下拉列表来选择选项卡。它需要像我想的那样显示所有时间选定的选项卡（标准引导下拉列表，不要这样做，它只是提供选项但不显示所选内容）。<select>

Answer 1

您可能希望隐藏并仅通过以下方式触发它们<ul><li><select>

下面是一个示例：

<ul class="nav nav-tabs">

  <li hidden><a href="#" id="a1">Menu 1</a></li>

  <li hidden><a href="#" id="a2">Menu 2</a></li>

  <li hidden><a href="#" id="a3">Menu 3</a></li>

</ul>

<select onchange="selectTab(this.value)">

  <option value="1">Menu 1</option>

  <option value="2">Menu 2</option>

  <option value="3">Menu 3</option>

</select>

以及示例脚本：

    function selectTab(e){

      switch(e){

        case 1:

            $('#a1').click();

        break;

        case 2:

            $('#a2').click();

        break;

        case 3:

            $('#a3').click();

        break;

        default:

      }

    }

这是 jsfiddle