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

Question

是否可以更改引导选项卡的外观，使其具有下拉选择，而不是使用 和 创建的标准选项卡<ul><li>

我有相对较小的区域（如col-3），我需要显示具有大量选项卡的选项卡（如7-10个选项卡），但是当它跨越到3-4行时，它在小屏幕上看起来很丑陋。

我想使用选择下拉列表（也许是一些用于slecet的jquery插件），我总是使用该下拉列表来选择选项卡。

它需要像我想的那样显示所有时间选定的选项卡（标准引导下拉列表，不要这样做，它只是提供选项但不显示所选内容）。<select>

Answer 1

您可能希望隐藏并仅通过以下方式触发它们<ul><li><select>下面是一个示例：<ul class="nav nav-tabs">&nbsp; <li hidden><a href="#" id="a1">Menu 1</a></li>&nbsp; <li hidden><a href="#" id="a2">Menu 2</a></li>&nbsp; <li hidden><a href="#" id="a3">Menu 3</a></li></ul><select onchange="selectTab(this.value)">&nbsp; <option value="1">Menu 1</option>&nbsp; <option value="2">Menu 2</option>&nbsp; <option value="3">Menu 3</option></select>以及示例脚本：&nbsp; &nbsp; function selectTab(e){&nbsp; &nbsp; &nbsp; switch(e){&nbsp; &nbsp; &nbsp; &nbsp; case 1:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#a1').click();&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 2:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#a2').click();&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 3:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#a3').click();&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }这是&nbsp;jsfiddle