Anchos de entrada en Bootstrap 3


154

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>

55
¿Por qué usar bootstrap para administrar estos anchos? No parece ser particularmente bueno en eso, e introduce complejidad.
Eamon Nerbonne

1
¿Por qué usar bootstrap para esto, @Eamon? El diseño receptivo y la alineación con el resto de sus elementos que maneja Bootstrap vienen a la mente. Y de todos modos, el punto central de la pregunta es cómo hacerlo sin introducir complejidad.
ctb

@ctb: CSS simple maneja este tipo de problemas muy bien; no hay necesidad de la complejidad adicional de bootstrap.
Eamon Nerbonne

1
espera, ¿se respondió esta pregunta? 38 votos a favor es mucho.
torre

1
@rook: la respuesta es que no, no hay funcionalidad incorporada, aunque está en su lista de discusión. Sin embargo, a medida que avanzan las alternativas, se proporcionan algunas aquí hasta / si BS realmente agrega eso.
cyberwombat

Respuestas:


95

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


sí, eso es lo que puse en mi comentario a @Skelly: hay un problema abierto sobre esto y lo abordarán una vez que las cosas se hayan calmado. Agregar fila no es lo que estoy buscando debido al marcado adicional que es totalmente innecesario si hicieron las clases adecuadas, que es lo que hice. Creé .input1-12 con ancho porcentual y solo aplico eso a la entrada - funciona muy bien
cyberwombat

77
No he leído mucho sobre esta publicación, pero ... "Utilice las clases de cuadrícula predefinidas de Bootstrap para alinear etiquetas y grupos de controles de formulario en un diseño horizontal agregando .form-horizontal al formulario. Al hacerlo, los .form-groups se comportarán como filas de cuadrícula, por lo que no hay necesidad de .row ".
dtc

@dtc ¿Eso no ayuda mucho para los anchos de entrada?
Jacques

@shadowf ¿Y qué pasa si quiero hacer una entrada más corta que su etiqueta? ¿Tengo que poner una entrada en otro par de divs?
PowerGamer

1
gracias eso funciona para mi Por cierto, es domingo 10 pm para mí :-) ya que estoy en el otro lado del mundo.
Ananda

70

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.


15
Esto gana con mucho en las respuestas. Es limpio, reutilizable y simplemente funciona. De hecho, se debe poner en forma predeterminada ya que es una molestia muy común. Muy raramente quieres formas de bloque puro.
baweaver

Probé esta solución pero no funcionó para mí. Quería limitar el ancho de mi campo, así que usé 'width: 200px' en el estilo personalizado, pero eso no cambió el ancho. Solo cuando configuré 'max-width: 200px' obtuve el resultado correcto.
paulo62

Cuando uso esto, el ancho no anulará el ancho automático de la clase de control de formulario.
Johnny

1
Estoy de acuerdo con los comentarios aquí: en realidad lo intenté antes de mirar aquí, no parece sobrescribir los valores predeterminados ... no estoy seguro de por qué algunos estilos personalizados sí y otros no.
Wil

1
Aquí hay un violín que demuestra cómo se ve esto: jsfiddle.net/yd1ukk10
brandones

25

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

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

Si observa el violín, verá que el OP quiere hacer que los campos sean más pequeños, no más grandes. El mayor problema aquí es que su sitio no hace referencia al sitio.css en absoluto.
Bmize729

No sabía que la regla CSS estaba allí y me estaba volviendo loco que mis anchos específicos parecieran ser ignorados. Gracias.
Michael S. Miller

10

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


66
Debe agregar la clase de fila al grupo de formulario: tuve una discusión con el equipo de Bootstrap y ellos agregaron la posibilidad de ingresar un control de ancho específico a su lista de planificación. Mientras tanto, tenemos que usar cuadrículas completas. Si continúa y agrega una fila a la clase de grupo de formulario y elimina la clase horizontal, marcaré esta respuesta. Aquí está el violín de trabajo jsfiddle.net/tdUtX/2 y la planificación github.com/twbs/bootstrap/issues/9397
cyberwombat

1
+ @ Yashua - +1 gran ejemplo. Esto también funciona con la clase input-group, que me estaba dando problemas.
David Robbins

10

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/


1
no funciona para pequeños dispositivos como el campo de entrada se hace demasiado pequeña
FranBran

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


8
Eso realmente no funciona. Hace que cada elemento subsiguiente flote junto a este. Debe agregar un div con fila de clase en cada grupo de formularios que es ridículo.
cyberwombat

6

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

gracias hombre, cuatro años después esto me salvó
Rich

4

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.


4

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


3

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.


3

No tienes que renunciar a css simple :)

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

1

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.


0

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.


0

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


0

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>

0

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> 

0

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.