¿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.Cambiar el ancho de la etiqueta de selección en Twitter Bootstrap
Respuesta
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"
Solo quiero señalar que esto no funciona en bootstrap 3. Estas clases ahora solo tienen un efecto en la altura/relleno del control. – Stefan
Para twitter bootstrap 3, agregue: .input-mini { ancho: 60px; } .input-small { ancho: 90 px; } .input-medium { ancho: 150 px; } .input-large { ancho: 210px; } .input-xlarge { ancho: 270px; } .input-xxlarge { ancho: 530px; } –
una solución responsable (dinámica) sería agradable –
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.
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');
Esta es una buena solución. Pero cuando se agregan 3 menús desplegables, esto hace que se acumulen estos 3 menús desplegables. –
No lo hago si aún necesita ayuda tres años después, para los que vienen, puede agregar display: inline-block para que no se apile –
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.
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;
}
}
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>
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
Esto solo tiene efecto en la altura del elemento 'select', no en el ancho . – McVenco
- 1. ¿Cómo cambio el ancho de la red de Twitter Bootstrap?
- 2. Twitter Bootstrap - Fondo de ancho completo (imagen)
- 3. ¿Cómo puedo cambiar cols de textarea en twitter-bootstrap?
- 4. Unidad héroe de ancho completo en Twitter Bootstrap
- 5. Splitter para Twitter Bootstrap
- 6. Twitter Bootstrap, mantenga el menú alineado al ancho del contenedor
- 7. Cambiar las pestañas Twitter Bootstrap automáticamente
- 8. Twitter Bootstrap cargador en línea?
- 9. No se puede cambiar el botón de Twitter ancho
- 10. resaltado de sintaxis en twitter bootstrap
- 11. Twitter bootstrap typeahead valores múltiples?
- 12. Cambiar estilo btn-group .active en Twitter Bootstrap
- 13. ¿Es posible cambiar la posición de los popovers de Bootstrap según el ancho de la pantalla?
- 14. Disposición del fluido Bootstrap - ancho fijo de la barra lateral
- 15. cómo detener la respuesta de imagen en twitter-bootstrap?
- 16. Cómo extender el complemento Bootstrap de Twitter
- 17. ¿Enviar selección en Bootstrap typeahead() autocompletar?
- 18. Centrar la navegación en Twitter Bootstrap
- 19. Bootstrap de Twitter IE7 error
- 20. Twitter Bootstrap etiquetas y entradas
- 21. Twitter Bootstrap sidet caret
- 22. Tooltips con Twitter Bootstrap
- 23. Symfony2 y Twitter Bootstrap
- 24. Twitter Bootstrap Modal - IsShown
- 25. Twitter bootstrap accordion-heading
- 26. Twitter Bootstrap FileUpload
- 27. encabezado "ejemplo" en twitter bootstrap
- 28. Twitter menú desplegable Bootstrap
- 29. Twitter Bootstrap CSS-fluido estático forma posicionamiento
- 30. Plone y Twitter Bootstrap
¿puede publicar su html? – gaurang171