Inhalt von <select> verschwinden, wenn Seite in der Größe geändert wird

Question

Ich habe 3 HTML-Selects in einer Zeile auf meiner Seite, die normalerweise gut angezeigt werden. Wenn die Größe der Seite jedoch unterhalb einer bestimmten Breite geändert wird, verschwinden die Inhalte aller ausgewählten Elemente. Sie können beide Zustände sehen hier:

Normal Width Screenshot

Resized Screenshot

I Bootstrap 2.3.2 verwenden und diese sind nur normale select-Tags ohne zusätzlichen Styling oder Javascript. Kann jemand verhindern, dass der Inhalt meines Auswahl-Tags verschwindet, wenn die Größe der Seite geändert wird? Die Verwendung einer anderen Version von Bootstrap ist keine Option. Ich bin mit 2.3.2 festgefahren.

Wenn ich weiter die Breite verringern, kommen die Inhalte der Auswahl zurück. Ich vermute, es hat etwas mit Bootstrap und Reaktionsfähigkeit etc. zu tun, aber ich weiß nicht genug über Bootstrap, um die genaue Ursache festzuhalten.

konnte ich Chrome Developer Tools verwenden, und festgestellt, dass, wenn der Text in der Auswahl verschwinden, wenn ich die Schriftgröße in dem folgenden deaktivieren:

@media (max-width: 1024px) and (min-width: 481px) 
label, button, select, .uiGrid.table td, .uiGrid.table th { 
    font-size: inherit; 
} 

Der Text in der ausgewählten erscheint wieder. Leider ist dieses CSS-Bit in einer gemeinsam genutzten Bibliothek definiert, die ich nicht kontrolliere.

Wie gewünscht, hier ist der Code, den ich die wählen auf der Seite hinzufügen verwenden:

  <div class="pull-left"> 
      <div class="btn-toolbar" style="margin: 0;"> 
       <div class="btn-group">      
        <select class="input-medium"> 
         <option>Select 1</option> 
         <option>Value 2</option> 
         <option>Value 3</option> 
         <option>Value 4</option> 
        </select> 
       </div> 
       <div class="btn-group"> 
        <select class="input-medium"> 
         <option>Select 2</option> 
         <option>Value 2</option> 
         <option>Value 3</option> 
         <option>Value 4</option> 
        </select> 
       </div> 
       <div class="btn-group"> 
        <select class="input-medium"> 
         <option>Select 3</option> 
         <option>Value 2</option> 
         <option>Value 3</option> 
         <option>Value 4</option> 
        </select> 
       </div> 
      </div> 
     </div> 

Answer 1

den Hammer nehmen und überschreibt das media query Material in Ihrem CSS:

@media (max-width: 1024px) and (min-width: 481px) 
label, button, select, .uiGrid.table td, .uiGrid.table th { 
    font-size: (whatever value you need ie. 24px) !important; 
}