Select2 squishing Dropdown-Listen Listen in Bootstrap-Tabs

Question

I Bootstrap-Tabs verwende und mache Gebrauch von select2 Plugin (durchsuchbar Drop-Down-Liste)

ich mehrere Tabs haben, aber aus irgendeinem Grund, wenn ich die select2 in den Registerkarten bin mit jeder anders als die aktive Registerkarte beim Laden, sind die Dropdown-Listen nur bündeln ohne die col-md-3 Klasse, die ich ihnen gebe. Stattdessen zerquetschen sie sich. Die Dropdown-Liste in der ersten aktiven Klasse, die beim Laden der Seite angezeigt wird, gehorcht der Klasse korrekt.

Ich erstellte eine Probe in jfiddle mit Testdaten, auf die zugegriffen werden kann HERE. Abschnitt B Dropdown-Liste gehorcht nicht der Klasse col-md-3, obwohl Klasse A tut.

Irgendwelche Hilfe? Ehrlich gesagt möchte ich nicht style="width:100%" verwenden oder mit irgendwelchen Arten wegen der beweglichen Empfindlichkeit herum tüfteln. Danke nochmal.

EDIT: Ich habe dies in Opera Browser, Mozilla Firefox und Google Chrome getestet. Der schlimmste Erfolg ist Opera. Google Chrome am besten reagiert, wo dieses Problem nicht immer

reproduzieren

Answer 1

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

Fiddle.

Sie müssen Select2 initialisieren, wenn Sie auf der Registerkarte auslösen. So wird es in die zugewiesene Klasse col-md-3 Breite passen. Die Verwendung des Zeitintervalls verhindert, dass es vor der auf HTML reagierenden Konstruktion initialisiert wird. Zeitintervall ggf. erhöhen. Ich denke, das ist der Weg, ohne CSS-Stile zu lösen.