css - color - Anchos de entrada en Bootstrap 3

tooltip bootstrap

Question

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 compilació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 here . Ahora que BS4 está fuera, es posible usar los estilos de sizing 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/

<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>

Answer 1

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

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

Answer 2

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:

<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>

Answer 3

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>

Answer 4

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).

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

Answer 5

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 .

    <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 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 ''.

Answer 6

En Bootstrap 3

Todos los elementos textuales <input>, <textarea> y <select> con .form-control se establecen en width: 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 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.

Answer 7

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:

<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 forma, no tiene que poner marcado adicional para el diseño en su HTML.

Answer 8

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í:

<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: 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.

Answer 9

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:

<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/

Answer 10

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

Answer 11

No tienes que renunciar a un simple CSS :)

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

Answer 12

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 los 100px en auto

Espero poder ayudar.

Answer 13

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í:

<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 una forma en línea.

Answer 14

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;
}

Answer 15

Si lo que busca es simplemente reducir o aumentar 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é:

    <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 forma, no necesitará usar ninguno de los sistemas de grillas de Bootstrap y también mantendrá la forma receptiva.

Answer 16

También luché 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 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.

Answer 17

<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 al form.group para restringir las entradas