Anchos de entrada en Bootstrap 3

Actualizar de nuevo: estoy cerrando esta pregunta seleccionando la respuesta principal para evitar que las personas agreguen respuestas sin entender realmente la pregunta. En realidad, no hay forma de hacerlo con la funcionalidad de comstackción sin usar la grilla o agregar css extra. Las grillas no funcionan bien si se trata help-block elementos de help-block que necesitan ir más allá de una entrada corta, por ejemplo, pero son ‘integrables’. Si ese es un problema, recomiendo usar clases de CSS adicionales que puedes encontrar en la discusión de BS3 aquí . Ahora que BS4 está fuera, es posible usar los estilos de tamaño incluidos para administrar esto, por lo que esto no será relevante durante mucho más tiempo. Gracias a todos por su buen aporte a esta popular pregunta SO.

Actualización: esta pregunta permanece abierta porque se trata de la funcionalidad incorporada en BS para gestionar el ancho de entrada sin recurrir a la cuadrícula (a veces deben gestionarse de forma independiente). Ya uso clases personalizadas para gestionar esto, así que este no es un tutorial sobre CSS básico. La tarea está en la lista de discusión de funciones de BS y aún no se ha abordado.

Pregunta original: ¿ Alguien encuentra una forma de administrar el ancho de entrada en BS 3? Actualmente estoy usando algunas clases personalizadas para agregar esa funcionalidad, pero es posible que haya omitido algunas opciones no documentadas.

Los documentos actuales dicen que se debe usar .col-lg-x, pero eso claramente no funciona, ya que solo se puede aplicar al contenedor div que luego causa todo tipo de problemas de diseño / flotación.

Aquí hay un violín. Es raro que en el violín ni siquiera pueda cambiar el tamaño del grupo de formularios.

http://jsfiddle.net/tX3ae/

 

Lo que quieres hacer es ciertamente alcanzable.

Lo que quiere es envolver cada ‘grupo’ en una fila, no el formulario completo con solo una fila. Aquí:

 

My form

How to make these input fields small and retain the layout.

El NUEVO jsfiddle que hice: NEW jsfiddle

Tenga en cuenta que en el nuevo violín, también he agregado ‘col-xs-5’ para que pueda verlo en pantallas más pequeñas también, eliminarlas no hace ninguna diferencia. Pero tenga en cuenta que en sus clases originales, solo está usando ‘col-lg-1’. Eso significa que si el ancho de la pantalla es más pequeño que el tamaño de la consulta de medios ‘lg’, entonces se usa el comportamiento de bloque predeterminado. Básicamente, solo aplicando ‘col-lg-1’, la lógica que está empleando es:

 IF SCREEN WIDTH < 'lg' (1200px by default) USE DEFAULT BLOCK BEHAVIOUR (width=100%) ELSE APPLY 'col-lg-1' (~95px) 

Vea el sistema de cuadrícula Bootstrap 3 para más información. Espero haber sido claro, de lo contrario, háganmelo saber y lo elaboraré más.

En Bootstrap 3

Simplemente puede crear un estilo personalizado:

 .form-control-inline { min-width: 0; width: auto; display: inline; } 

Luego agréguelo para formar controles como ese:

 

De esta forma, no tiene que poner marcado adicional para el diseño en su HTML.

ASP.net MVC vaya a Content- Site.css y elimine o comente esta línea:

 input, select, textarea { /*max-width: 280px;*/ } 

Creo que debes envolver las entradas dentro de col-lg-4 , y luego dentro del form-group y todo queda contenido en una form-horizontal .

  
...

Demostración en Bootply – http://bootply.com/78156

EDITAR: de los documentos de Bootstrap 3 ..

Las entradas, selecciones y áreas de texto son 100% de ancho por defecto en Bootstrap. Para usar la forma en línea, deberá establecer un ancho en los controles de formulario utilizados dentro.

Entonces, otra opción es establecer un ancho específico usando CSS:

 .form-control { width:100px; } 

O bien, aplique col-sm-* al `form-group ‘.

 

Agregue la clase al form.group para restringir las entradas

Los documentos actuales dicen usar .col-xs-x, no lg. Luego pruebo el violín y parece que funciona:

http://jsfiddle.net/tX3ae/225/

para mantener el diseño, tal vez pueda cambiar dónde pone la clase “fila” de esta manera:

 

My form

How to make these input fields small and retain the layout.

http://jsfiddle.net/tX3ae/226/

Si está utilizando la plantilla Master.Site en Visual Studio 15, el proyecto base tiene “Site.css”, que OVERRIDES el ancho de los campos de control de formulario.

No pude obtener el ancho de mis cuadros de texto para obtener más ancho que 300 px de ancho. Intenté TODO y nada funcionó. Descubrí que hay una configuración en Site.css que estaba causando el problema.

Deshágase de esto y podrá controlar el ancho de sus campos.

 /* Set widths on the form inputs since otherwise they're 100% wide */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="select"] { max-width: 280px; } 

Sé que este es un hilo viejo, pero experimenté el mismo problema con una forma en línea, y ninguna de las opciones anteriores resolvió el problema. Así que arreglé mi formulario en línea así:

 
0 results

Esa fue mi solución. Bit hacky hack, pero hizo el trabajo para una forma en línea.

En Bootstrap 3

Todos los elementos textuales ,

http://getbootstrap.com/css/#forms-example

Parece que, en algunos casos, tenemos que establecer manualmente el ancho máximo que queremos para las entradas.

De todos modos, tu ejemplo funciona. Simplemente márquelo con una pantalla grande, para que pueda ver que los campos de nombre y correo electrónico están obteniendo el 2/12 del con (col-lg-1 + col-lg-1 y tiene 12 columnas). Pero si tiene una pantalla más pequeña (simplemente cambie el tamaño de su navegador), las entradas se expandirán hasta el final de la fila.

No tienes que renunciar a un simple CSS 🙂

 .short { max-width: 300px; }  

Puede agregar el atributo de estilo o puede agregar una definición para la etiqueta de entrada en un archivo css.

Opción 1: agregar el atributo de estilo

  

Opción 2: definición en css

 input{ width: 100px } 

Puedes cambiar los 100px en auto

Espero poder ayudar.

Si lo que busca es simplemente reducir o boost el ancho de los elementos de entrada de Bootstrap a su gusto, usaría max-width en el CSS.

Aquí hay un ejemplo muy simple que creé:

  

Establecí el ancho máximo de todo el formulario en 500 px. De esta forma, no necesitará usar ninguno de los sistemas de grillas de Bootstrap y también mantendrá la forma receptiva.

También luché con el mismo problema, y ​​esta es mi solución.

Fuente HTML

 

Cubra el código de entrada con otra clase div

Fuente de CSS

 .input_width{ width: 450px; } 

dar cualquier ajuste de ancho o margen en la clase Div cubierto.

El ancho de entrada de Bootstrap siempre es predeterminado como 100%, por lo que el ancho es el ancho cubierto.

Esta no es la mejor manera, pero la solución más fácil y única que he resuelto el problema.

Espero que esto haya ayudado.

Bootstrap 3 logré un buen diseño de formulario receptivo usando lo siguiente:

 

No sé por qué todos parecen pasar por alto el archivo site.css en la carpeta de contenido. Mire la línea 22 en este archivo y verá que se controlan las configuraciones para la entrada. Parece que su sitio no hace referencia a esta hoja de estilo.

Agregué esto:

input, select, textarea { max-width: 280px;}

a tu violín y funciona muy bien.

Nunca deberías actualizar bootstrap.css o bootstrap.min.css. Hacerlo te configurará para fallar cuando se actualice el bootstrap. Es por eso que el archivo site.css está incluido. Aquí es donde puede hacer cambios en el sitio que aún le dará el diseño receptivo que está buscando.

Aquí está el violín con el trabajo

Agregue y defina los términos para el style="" en el campo de entrada, esa es la manera más fácil de hacerlo: Ejemplo:

 

Bootstrap usa la clase ‘form-input’ para controlar los atributos de ‘campos de entrada’. Simplemente, agregue su propia clase ‘entrada de formulario’ con el ancho, borde, tamaño de texto deseado, etc. en su archivo css o en la sección de la cabeza.

(o bien, agregue directamente el tamaño = ‘5’ código en línea en los atributos de entrada en la sección del cuerpo).