在引导选项卡中选择 2 挤压下拉列表

Posted 2023-05-07

【中文标题】在引导选项卡中选择 2 挤压下拉列表

【英文标题】：Select2 squishing dropdowns lists in bootstrap tabs

【发布时间】：2016-09-20 00:26:12

【问题描述】：

我正在使用引导选项卡并正在使用 select2 插件（可搜索的下拉列表）

我有多个选项卡，但出于某种原因，每当我在选项卡中使用select2 时，除了加载的活动选项卡之外，下拉列表只是在不遵守col-md-3 类的情况下堆积起来给他们。相反，他们挤了起来。页面加载时显示的第一个活动类中的下拉列表正确地服从该类。

我在 jsfiddle 中重新创建了一个带有测试数据的示例，可以访问 HERE。 B 部分的下拉列表不遵守col-md-3class，尽管 A 类遵守。

有什么帮助吗？老实说，由于移动响应能力，我不想使用style="width:100%" 或摆弄任何样式。 再次感谢。

编辑：我在 Opera 浏览器、Mozilla Firefox 和 Google Chrome 中对此进行了测试。受打击最严重的是 Opera。谷歌浏览器在此问题并非总是重现的地方做出了最佳响应

【参考方案1】：

$(document).ready(function() 
  $.fn.select2.defaults.set("theme", "classic");
  $("#carsA").select2();
  $('#second').on('click',function()
     setTimeout(function()$("#carsB").select2();,200);
  )
)

Fiddle.

您必须在选项卡上触发时初始化 Select2。所以它适合分配的类col-md-3宽度。时间间隔的使用是为了防止它在 html 响应式构造之前初始化。必要时增加时间间隔。我认为这是不用 CSS 样式解决的方法。