Cambiar el ancho de la etiqueta de selección en Twitter Bootstrap

Question

¿Cómo puedo cambiar el ancho de un campo de selección cuando uso Twitter bootstrap? Agregar input-xxlarge clases de CSS no parece funcionar (como lo hace en otros elementos de formulario), por lo que los elementos en mi menú desplegable están actualmente cortados.

Answer 1

Esto funciona para mí para reducir el ancho de la etiqueta de selección;

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

Puede utilizar cualquiera de estas clases;

class="input-small" 

class="input-medium" 

class="input-large" 

class="input-xlarge" 

class="input-xxlarge" 

Answer 2

Probado solo, <select class=input-xxlarge> establece el ancho del contenido del elemento en 530px. (El ancho total del elemento es ligeramente más pequeño que el de <input class=input-xxlarge> debido a un relleno diferente. Si este es un problema, configure los rellenos en su propia hoja de estilos como desee.)

Si no funciona, el efecto es impedido por alguna configuración en su propia hoja de estilo o tal vez en el uso de otras configuraciones para el elemento.

Answer 3

Hice una solución mediante la creación de una nueva clase css en mi hoja de estilo personalizada de la siguiente manera:

.selectwidthauto 
{ 
    width:auto !important; 
} 

y luego se aplica esta clase a todos mis seleccione los elementos de forma manual como:

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

O usando jQuery:

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

Answer 4

En el bootstrap 3, se recomienda que clasifique las entradas envolviéndolas en col-**-# etiquetas div. Parece que la mayoría de las cosas tienen un ancho del 100%, especialmente .form-control elementos.

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

Answer 5

Para mi clase css de Pawan combinado con display: inline-block (de modo que selecciona no se apilan) que funciona mejor. Y yo envuelvo en un medio-consulta, para que se mantenga móvil amable:

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

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

} 

Answer 6

se puede usar algo como esto

<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 arranque de clase de uso de la entrada-md = medio , input-lg = large, para obtener más información, vea https://getbootstrap.com/docs/3.3/css/#forms-control-sizes