Modifica larghezza del tag select in Twitter Bootstrap

Question

Come si modifica la larghezza di un campo di selezione, quando si utilizza il bootstrap di Twitter? L'aggiunta di input-xxlarge alle classi CSS non sembra funzionare (come avviene su altri elementi del modulo), pertanto gli elementi nel menu a discesa sono attualmente tagliati.

Answer 1

Questo mi aiuta a ridurre la larghezza del tag select;

<select id ="Select1" class="input-small"> 

È possibile utilizzare una qualsiasi di queste classi;

class="input-small" 

class="input-medium" 

class="input-large" 

class="input-xlarge" 

class="input-xxlarge" 

Answer 2

Testato da solo, <select class=input-xxlarge> imposta la larghezza del contenuto dell'elemento su 530 px. (La larghezza totale dell'elemento è leggermente inferiore a quella di <input class=input-xxlarge> a causa di diversi pad. Se questo è un problema, imposta i paddings nel tuo foglio di stile come desiderato.)

Quindi se non funziona, l'effetto è impedito da qualche impostazione nel proprio foglio di stile o magari nell'uso di altre impostazioni per l'elemento.

Answer 3

ho fatto una soluzione con la creazione di una nuova classe CSS nel mio foglio di stile personalizzato come segue:

.selectwidthauto 
{ 
    width:auto !important; 
} 

E poi applicato questa classe per tutti i miei elementi di selezione sia come manualmente:

<select id="State" class="selectwidthauto"> 
... 
</select> 

O utilizzando jQuery:

$('select').addClass('selectwidthauto'); 

Answer 4

In bootstrap 3, si consiglia di ridimensionare gli input inserendoli nei tag div col-**-#. Sembra che la maggior parte delle cose abbia una larghezza del 100%, in particolare gli elementi .form-control.

https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

Answer 5

Per me classe css di Pawan combinata con display: inline-block (in modo che le seleziona non impilare) funziona meglio. E mi avvolgo in un mezzo-query, in modo che rimanga mobile friendly:

@media (min-width: $screen-xs) { 

    .selectwidthauto { 
     width:auto !important; 
     display: inline-block; 
    } 

} 

Answer 6

si può usare qualcosa di simile

<div class="row"> 
    <div class="col-xs-2"> 
     <select id="info_type" class="form-control"> 
      <option>College</option> 
      <option>Exam</option> 
     </select> 
    </div> 
</div> 

http://getbootstrap.com/css/#column-sizing

Answer 7

con bootstrap classe di uso input-md = medio , input-lg = grande, per maggiori informazioni vedi https://getbootstrap.com/docs/3.3/css/#forms-control-sizes