css - color - span bootstrap 4

Cambiar el ancho de la etiqueta seleccionada en Twitter Bootstrap

Question

¿Cómo puedo cambiar el ancho de un campo de selección, cuando uso Twitter bootstrap? La adición input-xxlarge clases CSS input-xxlarge 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

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

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

Answer 2

Esto me sirve para reducir el ancho de la etiqueta seleccionada;

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

Puedes usar cualquiera de estas clases;

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"

Answer 3

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

.selectwidthauto
{
     width:auto !important;
}

Y luego apliqué esta clase a todos mis elementos seleccionados, ya sea manualmente como:

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

O usando jQuery:

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

Answer 4

Para mí, la clase css de Pawan combinada con pantalla: bloque en línea (para que los seleccionados no se apilen) funciona mejor. Y lo envuelvo en una consulta de medios, por lo que sigue siendo compatible con dispositivos móviles:

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

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

}

Answer 5

Probado solo, <select class=input-xxlarge> establece el ancho del contenido del elemento en 530px. (El ancho total del elemento es un poco más pequeño que el de <input class=input-xxlarge> debido a los diferentes rellenos. Si esto no es un problema, configure los rellenos en su propia hoja de estilo según lo desee).

Por lo tanto, si no funciona, el efecto se evita mediante alguna configuración en su propia hoja de estilo o tal vez en el uso de otras configuraciones para el elemento.

Answer 6

Puedes 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 bootstrap use class input-md = medium, input-lg = large, para obtener más información, consulte https://getbootstrap.com/docs/3.3/css/#forms-control-sizes