¿Por qué mis campos de formulario de Twitter Bootstrap desbordan su pozo con un contenedor de fluido?

Question

ACTUALIZACIÓN: Demo del problema aquí: http://jsfiddle.net/fdB5Q/embedded/result/

Desde aproximadamente 767px hasta 998px, los campos de formulario son más anchos que el pozo que lo contiene.

Más pequeño que 767px y todo el área de formulario cambia a una nueva línea. La página mostrada cuando la ventana del navegador tiene aproximadamente 200 px de ancho se visualiza perfectamente. Los campos de formulario se contraen como era de esperar.

Para una visual, un vistazo a esta pregunta muy similar: Twitter Bootstrap CSS static-fluid form positioning

Aquí está todo en la cabeza:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 

Aquí está todo en el Cuerpo:

<div class="container-fluid"> 

<div class="row-fluid"> 

<div class="span8"> 
<p>Some Content.</p> 
</div> 

<div class="span4"> 
    <div class="well">  
    <div class="control-group"> 
     <label class="control-label" for="name">Your Name</label> 
     <div class="controls"> 
     <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" /> 
     </div> 
    </div> 
    </div> 
</div> 

</div> 

</div> 

pienso Estoy malinterpretando alguna parte del marco. ¿No debería usar un contenedor de fluido? ¿Qué estoy haciendo mal? Podría arrojar algo para arreglar esto, pero creo que el problema puede ser que estoy haciendo algo equivocado.

He intentado cambiar mis tramos a 7 y 5 y aún he tenido el mismo error. Intenté 6 y 6, pero en ese momento la página comenzó a parecer ridícula. El resto de las respuestas no tenían sentido para mí.

Cambié la clase de entrada a grande en lugar de xlarge. Todavía tenía un rango de ancho donde se desbordaba, y realmente me gustaría tener campos más amplios si hay espacio en la pantalla.

Quiero evitar la barra de desplazamiento horizontal, y quiero que el texto de la página tenga el mismo tamaño en modo paisaje o retrato en mi teléfono inteligente.

ACTUALIZACIÓN: Fotos

página Mi problema:

versión simplificada:

S Versión implified al ancho del navegador 200 px:

Answer 1

las etiquetas HTML de entrada y sus correspondientes estilos .input-* sólo establecen el css width. Esto es por diseño.

Pero agregar un css max-width:100% asegurará que las entradas demasiado grandes se mantengan bajo control.
p. Ej. agregar esto a su jefe:

<style> 
    input { 
     max-width: 100%; 
    } 
</style> 

Answer 2

Por lo general, yo prefiero usar otra class="row-fluid" y class="span12" en elementos con class="spanX" a obtener el 100% ancho de algún elemento.Eso no causará errores en diferentes resoluciones. Entonces, agregué otra clase row-fluid en su elemento con la clase span4, y dentro de esa nueva row-fluid se agregó div con . A veces debes anular la configuración predeterminada de Bootstrap para obtener lo que necesitas, así que también he agregado la clase .my-input dentro del elemento <input /> para obtener un ancho del 100% y eliminar el relleno izquierdo y derecho (el relleno provocará errores en el lado derecho). Y aquí está el código: Clase

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8"> 
      <p>Some Content.</p> 
     </div> 
     <div class="span4 well"> 
      <div class="row-fluid"> 
       <div class="span12"> 
        <label class="control-label" for="name">Your Name</label> 
        <input type="text" class="my-input" name="name" id="name" maxlength="100" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

y CSS para la anulación

​.my-input 
{ 
    width: 100%; 
    padding: 4px 0 4px 0 !important; 
}​ 

Puede ver y Jsfiddle demo, trate de cambiar el tamaño de la pantalla.

Answer 3

me encontré con este problema y en la comprobación de la documentación de arranque para las entradas de forma que los estados de uso Clases tamaño relativo como .input-grande o coincide con sus entradas a los tamaños de las columnas de cuadrícula utilizando .span * clases. '

Mi fila bootstrap estaba configurada en span9 para contenido y span3 para la barra lateral. El ajuste <input class='span3'/> resolvió el problema para mí, los cuadros de entrada permanecen dentro de la barra lateral a medida que se reduce el tamaño de la pantalla.

Answer 4

Como se indica por Pavlo en esta respuesta: Twitter Bootstrap: Stop input field extending beyond well

Utilización de la clase input-block-level en lugar de la entrada-xlarge (o de otros tamaños) resuelve el problema también.

Answer 5

Solo un poco de entrada después de jugar con estos FOREVER (parece). Utilizo un atributo de ancho simple y lo configuro entre 85% y 95% dependiendo del contenedor, el relleno y otros factores CSS para evitar que los campos de entrada se extiendan hasta el borde del contenedor.

.input-example { 
    width: 90%; 
} 

¡NO SOY UN EXPERTO EN ESTO! Solo estoy ofreciendo lo que he aprendido y, por favor, no tome esto como un consejo de un desarrollador experimentado. Tratando de dar un poco de vuelta a una comunidad que me ha salvado la vida en innumerables ocasiones.

Answer 6

Me encontré con este problema con las entradas de formulario y el cuerpo del panel. Lo contesté en el siguiente artículo: Twitter Bootstrap: Stop input field extending beyond well

El problema para mí fue que el formulario estaba desbordado. Esto permitió que las entradas siguieran su ejemplo. Al fijar el ancho máximo del formulario (ancho máximo: 100%), pude arreglar las entradas así como cualquier otro contenido que pueda colocarse dentro del formulario.

Answer 7

El problema es más insidioso que todo esto para hacerlo bien, desafortunadamente. El uso de max-widths no hizo nada por mí. Y no me gusta mirar las cosas de basura, por lo que se clavó en un poco ...

Todo se reduce a estas tres líneas en la declaración CSS de un control de formulario:

width: 100%; 
padding: 6px 12px; 
border: 1px solid #cccccc; 

Cuando la anchura de una se establece el elemento de entrada de tipo texto, el relleno horizontal y el borde se agregan al 100% en lugar de tomarse de él. Por lo tanto, si el ancho de 100% w dijera, 500px, entonces el ancho del control de formulario de entrada de texto se convierte en w + 12 + 12 + 1 + 1, 526px. Las 26px adicionales son una constante, lo que significa que a menos que el porcentaje de ancho se calcule dinámicamente como 100% * (w/(w + 26px)) o 100% -26px, las cosas nunca saldrán iguales.

Yo personalmente creo que esto es un error en la definición o implementación de la interfaz html/css (no sé cuál, realmente no quiero tratar de encontrar las referencias en las arenas movedizas de la estándares.) Si dice que un campo de entrada va a tener un ancho del 100%, entonces la corrección debe aplicarse para que el ancho dentro de los márgenes sea del 100%, no del 100% sin el relleno horizontal y el ancho del borde incluidos.

Y, por cierto, el valor porcentual o el tamaño fijo no importa; también están fuera por 26px. Debe filtrar estos 26 píxeles del ancho.

No todo está perdido para las entradas textuales de arranque, al menos si está usando un compilador CSS que permite cálculos del lado del cliente. En menos, por ejemplo

input.form-control[type=text] { 
    width: calc(~'100%-26px'); 
} 

lo hará todo mejor. Tenga en cuenta que los tipos de correo electrónico y contraseña (al menos) también tienen el mismo problema.

26px es un poco frágil, por supuesto, pero las constantes están codificadas en la declaración de control de forma, por lo que sus manos están un poco atadas. Sería bueno hacer una prueba que verificara el tamaño de los controles en el renderizado para ver los cambios en la declaración de CSS en las actualizaciones de arranque, pero no esta noche, gracias.