Anchos de entrada en Bootstrap 3

Actualización de nuevo: estoy cerrando esta pregunta seleccionando la respuesta principal para evitar que las personas agreguen respuestas sin comprender realmente la pregunta. En realidad, no hay forma de hacerlo con la funcionalidad integrada sin usar grid o agregar CSS adicional. Las cuadrículas no funcionan bien si se trata de help-blockelementos que necesitan ir más allá de una entrada breve, por ejemplo, pero son 'incorporados'. Si ese es un problema, recomiendo usar clases css adicionales que puede encontrar en la discusión 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 por mucho más tiempo. Gracias a todos por los buenos comentarios sobre esta popular pregunta SO.

Actualización: Esta cuestión sigue abierta, ya que se trata de una función de la funcionalidad en BS para gestionar el ancho de entrada sin tener que recurrir a la red (a veces tienen que ser gestionados de forma independiente). Ya uso clases personalizadas para administrar esto, por lo que este no es un tutorial sobre CSS básico. La tarea está en la lista de discusión de características BS y aún no se ha abordado.

Pregunta original: ¿ Alguien descubrió 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 me haya perdido 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. Extraño es que en el violín ni siquiera puedo cambiar el tamaño del grupo de formularios.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Lo que quieres hacer es ciertamente posible.

Lo que desea es ajustar cada 'grupo' en una fila, no todo el formulario con solo una fila. Aquí:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

El NUEVO jsfiddle que hice: NUEVO jsfiddle

Tenga en cuenta que en el nuevo violín, también he agregado 'col-xs-5' para que también pueda verlo en pantallas más pequeñas; eliminarlos 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 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)

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

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 de esta manera:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

De esta manera, no tiene que poner marcas adicionales 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 necesitas envolver las entradas dentro de a col-lg-4, y luego dentro de form-groupy todo queda contenido en a form-horizontal...

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

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

EDITAR: de los documentos de Bootstrap 3 ..

Las entradas, selecciones y áreas de texto tienen 100% de ancho de manera predeterminada en Bootstrap. Para utilizar el formulario en línea, deberá establecer un ancho en los controles de formulario utilizados en.

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

.form-control {
    width:100px;
}

O aplique el col-sm-*al 'grupo de formularios'.

Los documentos actuales dicen que use .col-xs-x, no lg. Luego lo intento en violín y parece funcionar:

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

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

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

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

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

Agregue la clase a form.group para restringir las entradas

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

No pude hacer que el ancho de mis cuadros de texto sea más ancho que aproximadamente 300 px de ancho. Probé TODO y nada funcionó. Descubrí que hay una configuración en Site.css que causaba el problema.

Deshágase de esto y puede obtener control sobre los anchos de campo.

/* 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 un formulario en línea, y ninguna de las opciones anteriores resolvió el problema. Así que arreglé mi formulario en línea de la siguiente manera:

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

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

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

<input type="text" class="form-control" id="ex1" style="width: 100px;">

Opción 2: definición en CSS

input{
  width: 100px
}

Puedes cambiar el 100px en auto

Espero poder ayudar

En Bootstrap 3

Todos los elementos textuales <input>, <textarea> y <select> con .form-control están configurados en ancho: 100%; por defecto.

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 verifíquelo con una pantalla grande, para que pueda ver que el nombre y los campos de correo electrónico están obteniendo el 2/12 de los 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 css simple :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Si está buscando simplemente reducir o aumentar el ancho de los elementos de entrada de Bootstrap a su gusto, lo usaría max-widthen el CSS.

Aquí hay un ejemplo muy simple que creé:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Establecí el ancho máximo de todo el formulario en 500 px. De esta manera, no necesitará usar ninguno del sistema de cuadrícula de Bootstrap y también mantendrá la forma receptiva.

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

Fuente HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Cubra el código de entrada con otra clase div

Fuente CSS

.input_width{
   width: 450px;
}

dar cualquier ajuste de ancho o margen en la clase div cubierta.

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

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

Espero que esto haya ayudado.

No sé por qué todos parecen pasar por alto el archivo site.css en la carpeta Contenido. Mire la línea 22 en este archivo y verá las configuraciones para controlar 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 bien.

Nunca debe actualizar bootstrap.css o bootstrap.min.css. Hacerlo lo configurará para que falle cuando bootstrap se actualice. Es por eso que se incluye el archivo site.css. Aquí es donde puede realizar cambios en el sitio que aún le brindarán el diseño receptivo que está buscando.

Aquí está el violín con él funcionando

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

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap usa la clase 'entrada-formulario' para controlar los atributos de 'campos de entrada'. Simplemente, agregue su propia clase de 'entrada de formulario' con el ancho, borde, tamaño de texto, etc. deseados en su archivo CSS o sección de encabezado.

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

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

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

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>